1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <script type="text/javascript">
8 window.onload=function(){
9 var b01=document.getElementById("checkedAll");
10 var a=document.getElementsByName("items");
11 var checkAllBox=document.getElementById("checkAllBox");
12 b01.onclick=function(){
13 /*
14 设置四个多选框变成选中状态
15 通过多选框的checked属性可以来获取多选框的选中状态
16 alert(a[i].checked);
17 */
18 for(var i=0;i<a.length;i++)
19 {
20 a[i].checked=true;
21 }
22 checkedAllBox.checked=true;
23
24 };
25 var b02=document.getElementById("notChecked");
26 b02.onclick=function(){
27 for(var i=0;i<a.length;i++){
28 a[i].checked=false;
29 }
30
31 };
32 var b03=document.getElementById("checkedReverse");
33 b03.onclick=function(){
34 for(var i=0;i<a.length;i++)
35 a[i].checked=!a[i].checked;
36 };
37 /*
38 提交按钮
39 点击按钮，将所有选中的多选框的value属性值弹出
40 为sent绑定单击响应函数
41 */
42 var send=document.getElementById("sent");
43 sent.onclick=function(){
44 for(var i=0;i<a.length;i++){
45 if(a[i].checked)
46 alert(a[i].value);
47 }
48 };
49 /*
50 全选/全不选多选框
51 当它选中时，其余的也选中，当它取消时其余的也取消
52 在响应函数中，响应函数是给谁绑定的，this就是谁
53 */
54 //为checkedAllBox绑定响应函数
55 checkAllBox.onclick=function(){
56 var flag=this.checked;
57 for(var i=0;i<a.length;i++){
58 a[i].checked=flag;
59 }
60 }
61 /*
62 如果四个多选框全都选中，则checkAllBox也应该选中
63 如果四个多选框没都选中，则checkAllBox也不应该选中
64 为四个多选框分别绑定单击响应函数
65 */
66 for(var i=0;i<a.length;i++)
67 {
68 a[i].onclick=function(){
69 checkAllBox.checked=true;
70 for(var j=0;j<a.length;j++){
71 if(!a[j].checked){
72 checkAllBox.checked=false;
73 break;
74 }
75 }
76 }
77
78 }
79 };
80 </script>
81
82 <body>
83 <!--
84 parentNode 表示当前节点的父节点
85 previousSibling 表示当前节点的前一个兄弟节点(可以获取到空白的文本)
86 previousElementSibling 获取前一个兄弟元素 ie8及以下不支持
87 nextSibling 表示当前节点的后一个兄弟节点
88 -->
89 <form method="post" action="">
90 你爱好的运动是？<input type="checkbox" id="checkAllBox"/>全选、全不选
91 <br/>
92 <input type="checkbox" name="items" value="football">football
93 <input type="checkbox" name="items" value="basketball">basketball
94 <input type="checkbox" name="items" value="baseball">baseball
95 <br/>
96 <input type="button" id="checkedAll" value="全 选"/>
97 <input type="button" id="notChecked" value="全不选"/>
98 <input type="button" id="checkedReverse" value="反选"/>
99 <input type="button" id="sent" value="提交"/>
100 </form>
101 </body>
102 </html>
