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>
复选框的全选(引自锋利的jQuery),布布扣,bubuko.com
时间： 2024-10-20 08:23:13