1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>全选练习</title>
6 </head>
7 <body>
8
9 <form>
10 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
11
12 <br/>
13 <input type="checkbox" name="items" value="足球"/>足球
14 <input type="checkbox" name="items" value="篮球"/>篮球
15 <input type="checkbox" name="items" value="羽毛球"/>羽毛球
16 <input type="checkbox" name="items" value="乒乓球"/>乒乓球
17 <br/>
18 <input type="button" id="checkedAllBtn" value="全 选"/>
19 <input type="button" id="checkedNoBtn" value="全不选"/>
20 <input type="button" id="checkedRevBtn" value="反 选"/>
21 <input type="button" id="sendBtn" value="提 交"/>
22 </form>
23
24 <script src="js/jquery-1.10.1.js"></script>
25 <script type="text/javascript">
26 /*
27 功能说明:
28 1. 点击'全选': 选中所有爱好
29 2. 点击'全不选': 所有爱好都不勾选
30 3. 点击'反选': 改变所有爱好的勾选状态
31 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
32 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
33 6. 点击'提交': 提示所有勾选的爱好
34 */
35 // 获取全选全不选的复选框
36 var $checkedAllBox = $('#checkedAllBox');
37 // 获取所有爱好
38 var $items = $(':checkbox[name=items]');
39 //var $items= $(':checkbox').filter('[name=items]');
40
41
42 // 1. 点击'全选': 选中所有爱好
43 $('#checkedAllBtn').click(function () {
44 $items.prop('checked',true);
45 $checkedAllBox.prop('checked',true);
46 });
47
48 // 2. 点击'全不选': 所有爱好都不勾选
49 $('#checkedNoBtn').click(function () {
50 $items.prop('checked',false);
51 $checkedAllBox.prop('checked',false);
52 })
53
54
55 // 3. 点击'反选': 改变所有爱好的勾选状态
56 $('#checkedRevBtn').click(function () {
57 // 因为每个复选框当前的状态不同 所以需要单独判断每个的选中状态 不能使用隐式遍历
58 // 在each方法中 this指向当前每次拿出来的那个dom
59 $items.each(function () {
60 this.checked = !this.checked;
61 })
62 // 如果当前选中的复选框个数和总个数相等 就应该更新全选/全不选的状态为选中
63 // 获得选中的复选框集合
64 // var checkedList = $(':checkbox[name=items]:checked');
65 // if($items.length === checkedList.length){
66 //// 能进这个判断 就说明选中个数和总个数相等了 说明全选中
67 // $checkedAllBox.prop('checked',true);
68 // }else{
69 //// 到了else里边 说明不是全不选中
70 // $checkedAllBox.prop('checked',false);
71 // }
72 // $checkedAllBox.prop('checked',$items.filter(':checked').length === $items.length);
73 // 不选中的长度为0 也是全选
74 $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);
75 });
76
77
78 // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
79 $items.click(function () {
80 $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0);
81 });
82
83
84 // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
85 $checkedAllBox.click(function () {
86 // 一旦点击了全选/全不选的这个按钮 它的状态就要设置给所有的爱好复选框
87 $items.prop('checked',this.checked);
88 });
89
90
91 // 6. 点击'提交': 提示所有勾选的爱好
92 $('#sendBtn').click(function () {
93 $items.filter(':checked').each(function () {
94 alert(this.value);
95 // alert($(this).val());
96 })
97 })
98
99
100 </script>
101 </body>
102
103 </html>
