jq实现全选，全取消，反选 

 1 <!doctype html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="jquery.min.js"></script>
 7 </head>
 8 <body>
 9   <input type="checkbox" id="checkbox1"><label for="checkbox1">库里</label><br>
10   <input type="checkbox" id="checkbox2"><label for="checkbox2">科比</label><br>
11   <input type="checkbox" id="checkbox3"><label for="checkbox3">麦迪</label><br>
12   <input type="checkbox" id="checkbox4"><label for="checkbox4">邓肯</label><br>
13   <input type="checkbox" id="checkbox5"><label for="checkbox5">奥尼尔</label><br><br>
14   <button>全选</button><button>全不选</button><button>反选</button>
15 </body>
16 </html>
17 <script type="text/javascript">
18     $(function(){
19         //匹配第一个button
20         $(':button:eq(0)').click(function(){
21             //全部选中 checked=true,在前台就是表示选中
22             $(':checkbox').attr('checked',true);
23         });
24         //匹配第二个button
25         $(':button:eq(1)').click(function(){
26             //全部取消 checked=false,在前台就是表示未选中
27             $(':checkbox').attr('checked',false);
28         });
29         //匹配第三个button
30         $(':button:eq(2)').click(function(){
31             //查找每一个复选框，然后取相反
32             $(':checkbox').each(function(){
33                 $(this).attr('checked',!$(this).attr('checked'));
34             });
35         });
36     })
37 </script>

 

posted @ 2016-03-08 18:20  多多喜  阅读(952)  评论(0)  编辑  收藏  举报