复选框的全选(引自锋利的jQuery)

浏览数：53 / 时间：2015年06月09日

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta name="generator" content="text/html" charset="utf-8" />
 5     <title>复选框组的全选/非全选</title>
 6     <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
 7     <!--
 8         思路：
 9         方法一：
10         1.对复选框组绑定单击事件。
11         2.定义一个flag变量，默认为true。
12         3.循环复选框组，当有没被选中的项时，则把变量flag的值设为false。
13         4.根据变量flag的值来设置id为“CheckedAll”的复选框是否被选中。
14           (1)如果flag为true,说明复选框组都被选中。
15           (2)如果flag为false,说明复选框组至少有一个未被选中。
16         方法二：
17         1.对复选框组绑定单击事件。
18         2.判断复选框的总数是否与选中的复选框数量相等。
19         3.如果相等，则说明全选中了，id为“CheckedAll”的复选框应当处于选中状态，否则不选中。
20     -->
21 </head>
22 <body>
23     <form>
24         <b>你爱好的运动是？</b><br />
25         <input type="checkbox" id="CheckedAll" /><label for="CheckedAll" >全选/全不选</label><br />
26         <input type="checkbox" id="chk1" name="items" value="足球" /><label for="chk1">足球</label>
27         <input type="checkbox" id="chk2" name="items" value="篮球" /><label for="chk2">篮球</label>
28         <input type="checkbox" id="chk3" name="items" value="羽毛球" /><label for="chk3">羽毛球</label>
29         <input type="checkbox" id="chk4" name="items" value="乒乓球" /><label for="chk4">乒乓球<br /></label>
30         <input type="button" id="send" value="提 交" />       
31     </form>
32     <script>
33         //对复选框组绑定单击事件
34         //方法一：
35         //$(‘[name=items]:checkbox‘).click(function () {
36         //    var flag = true;
37         //    $(‘[name=items]:checkbox‘).each(function () {
38         //        if (!this.checked) {
39         //            flag = false;
40         //        }
41         //    });
42         //    $(‘#CheckedAll‘).attr(‘checked‘, flag);
43         //})
44         //方法二：
45         $(‘[name=items]:checkbox‘).click(function () {
46             //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率
47             var $tmp = $(‘[name=items]:checkbox‘);
48             //用filter()方法筛选出选中的复选框，并直接给CheckdAll赋值
49             $(‘#CheckedAll‘).attr(‘checked‘, $tmp.length == $tmp.filter(‘:checked‘).length);
50         })
51 
52         //全选/全不选复选框绑定单击事件
53         $("#CheckedAll").click(function () {
54             if (this.checked) {//如果当前单击的复选框被选中
55                 $(‘[name=items]:checkbox‘).attr("checked", true);
56             } else {
57                 $(‘[name=items]:checkbox‘).attr("checked", false);
58             }
59             //简化后的方法
60             //$(‘[name=items]:checkbox‘).attr("checked", this.checked);            
61         })
62         //提交按钮绑定单击事件
63         $("#send").click(function () {
64             var str = "你选中的是：\r\n";
65             $(‘[name=items]:checkbox:checked‘).each(function () {
66                 str += $(this).val() + "\r\n";
67             });
68             alert(str);
69         })
70     </script>
71 </body>
72 </html>