1 <html>
2 <head></head>
3 <body>
4 <div id="places">
5 <input type="checkbox" name="chx" value="1" onclick="_check_status(this)"/>香港
6 <input type="checkbox" name="chx" value="2" onclick="_check_status(this)"/>澳门
7 <input type="checkbox" name="chx" value="3" onclick="_check_status(this)"/>深圳
8 <input type="checkbox" name="chx" value="4" onclick="_check_status(this)"/>台北
9 <input type="checkbox" name="chx" value="5" onclick="_check_status(this)"/>乌镇
10 </div>
11
12 <div id="allplaces">
13 <input type="checkbox" id="checkall" name="chx" value="0" onclick="_check_all(this)"/>全选
14 </div>
15 </body>
16 <script>
17 //点击“全选”， 所有地方都选上
18 function _check_all(obj)
19 {
20 var nodes = document.getElementById("places").childNodes;
21 if(obj.checked)
22 {
23 for (var i=0; i < nodes.length; i++)
24 {
25 if(nodes[i].type == "checkbox")
26 {
27 nodes[i].checked = true;
28 }
29 }
30 }
31 else
32 {
33 for (var i=0; i < nodes.length; i++)
34 {
35 if(nodes[i].type == "checkbox")
36 {
37 nodes[i].checked = false;
38 }
39 }
40 }
41 }
42
43 //每一个checkbox的状态校验
44 function _check_status(obj)
45 {
46 var nodes = document.getElementById("places").childNodes;
47 if(obj.checked)
48 {
49 for (var i=0; i < nodes.length; i++)
50 {
51 if((nodes[i].type == "checkbox") && !nodes[i].checked)
52 {
53 document.getElementById("checkall").checked = false;
54 return;
55 }
56 }
57
58 document.getElementById("checkall").checked = true;
59 }
60 else
61 {
62 document.getElementById("checkall").checked = false;
63 }
64 }
65
66 </script>
67 </html>
checkbox 全选操作
时间： 2024-10-10 14:31:16