当前位置: 代码迷 >> Web前端 >> jquery 兑现 邮箱的 全选/全不选 全选与全不选功能
  详细解决方案

jquery 兑现 邮箱的 全选/全不选 全选与全不选功能

热度:429   发布时间:2013-07-08 14:13:00.0
jquery 实现 邮箱的 全选/全不选 全选与全不选功能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
?<head>
? <title> New Document </title>
???? <script src="c:\jquery.js""></script>
? </head>
??? ?? <script>
//????????????????????? 全选/全不选???
??? ??? ??? ??? ?????? $(function(){
??? ??? ??? ??? ??? ? //? alert(true&&false);
??? ??? ??? ??? ??? ??? $("#checkboxAll").click(function(){
??? ??? ??? ??? ??? ??? ??????? $("[name=items]:checkbox").attr("checked",this.checked)
??? ??? ??? ??? ??? ??? });

//????????????????????? 反选??? ??? ??? ??? ??? ???
??? ??? ??? ??? ??? ??? $("#checkRev").click(function(){
??? ??? ??? ??? ??? ??? ??????? $("[name=items]:checkbox").each(function(){
??? ??? ??? ??? ??? ??? ??? ??? ??? this.checked=!this.checked;
??? ??? ??? ??? ??? ??? ??? ??? });
??? ??? ??? ??? ??? ??? });???
//????????????????????? 绑定
??????????????????????? $("[name=items]:checkbox").click(function(){
??? ??? ??? ??? ??? ??? ?????? var flag=true;
??? ??? ??? ??? ??? ??? ??????? $("[name=items]:checkbox").each(function(){
??? ??? ??? ??? ??? ??? ??? ??? ??? if(!this.checked){
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? flag=false;
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? return false;
??? ??? ??? ??? ??? ??? ??? ??? ??? ???
??? ??? ??? ??? ??? ??? ??? ??? ??? }??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ???
??? ??? ??? ??? ??? ??? ??? ??? });
??? ??? ??? ??? ??? ??? ??? ??? $("#checkboxAll").attr("checked",flag);
??? ??? ??? ??? ??? ??? });
??? ??? ??? ??? ?})
??? ?? </script>
?? <body>
?????? 你喜欢的水果是?
?????? <input type="checkbox" id="checkboxAll">全选/全不选</input><br>
???
?????? <input type="checkbox" name="items">苹果</input>
??? ?? <input type="checkbox" name="items">香蕉</input>
?????? <input type="checkbox" name="items">西瓜</input>
??? ?? <input type="checkbox" name="items">葡萄</input><br>
??? ?? <input type="button" id="checkRev" value="反选"></input><br>
?? </body>
</html>

  相关解决方案