1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>全选2</title>
6
7 </head>
8 <body>
9 <table id="carTable">
10 <thead>
11 <tr>
12 <td><input type="checkbox" class="check-all check"/></td>
13 <td>全选</td>
14 </tr>
15 </thead>
16
17 <tbody>
18 <tr>
19 <td><input type="checkbox" class="check-one check"/></td>
20 <td>冰箱</td>
21 </tr>
22 <tr>
23 <td><input type="checkbox" class="check-one check"/></td>
24 <td>电视</td>
25 </tr>
26 <tr>
27 <td><input type="checkbox" class="check-one check"/></td>
28 <td>空调</td>
29 </tr>
30
31 </tbody>
32 </table>
33
34
35 <script>
36 window.onload = function () {
37 //对低版本的IE处理兼容性问题
38 if (!document.getElementsByClassName) {
39 document.getElementsByClassName = function (cls) {
40 var ret = [];
41 var els = document.getElementsByTagName(‘*‘);//拿到所有标签
42 for (var i = 0, len = els.length; i < len; i++) {
43 if (els[i].className === cls
44 || els[i].className.indexOf(cls + ‘ ‘)
45 || els[i].className.indexOf(‘ ‘ + cls + ‘ ‘)
46 || els[i].className.indexOf(‘ ‘ + cls) >= 0) {
47 ret.push(els[i]);
48 }
49 }
50 return ret;
51 }
52 }
53
54 var checkInputs = document.getElementsByClassName(‘check‘);//所有的复选框
55 var checkAllInputs = document.getElementsByClassName(‘check-all‘);//全选框
56
57
58 for (var i = 0, len = checkInputs.length; i < len; i++) {
59 checkInputs[i].onclick = function () {
60 if (this.className === ‘check-all check‘) {
61 for (var j = 0; j < checkInputs.length; j++) {
62 checkInputs[j].checked = this.checked;
63 }
64 }
65 //子选框去掉一个，全选框应该为false
66 if (this.checked == false) {
67 for (var k = 0; k < checkAllInputs.length; k++) {
68 checkAllInputs[k].checked = false;
69 }
70 }
71
72 //子选框全部选上的时候，全选框应该为true
73
74 var ch = 0;
75
76 for (var x = 1; x < checkInputs.length; x++) {
77
78 if (checkInputs[x].checked == true) {
79
80 ch++;
81
82 }
83
84 }
85
86 if (ch == (checkInputs.length - checkAllInputs.length)) {
87
88 for (var z = 0; z < checkAllInputs.length; z++) {
89
90 checkAllInputs[z].checked = true;
91
92 }
93
94 }
95
96
97 }
98 }
99
100
101 }
102
103
104 </script>
105 </body>
106
107 </html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>全选2</title>
</head><body><table id="carTable"> <thead> <tr> <td><input type="checkbox" class="check-all check"/></td> <td>全选</td> </tr> </thead>
<tbody> <tr> <td><input type="checkbox" class="check-one check"/></td> <td>冰箱</td> </tr> <tr> <td><input type="checkbox" class="check-one check"/></td> <td>电视</td> </tr> <tr> <td><input type="checkbox" class="check-one check"/></td> <td>空调</td> </tr>
</tbody></table>
<script> window.onload = function () { //对低版本的IE处理兼容性问题 if (!document.getElementsByClassName) { document.getElementsByClassName = function (cls) { var ret = []; var els = document.getElementsByTagName(‘*‘);//拿到所有标签 for (var i = 0, len = els.length; i < len; i++) { if (els[i].className === cls || els[i].className.indexOf(cls + ‘ ‘) || els[i].className.indexOf(‘ ‘ + cls + ‘ ‘) || els[i].className.indexOf(‘ ‘ + cls) >= 0) { ret.push(els[i]); } } return ret; } }
var checkInputs = document.getElementsByClassName(‘check‘);//所有的复选框 var checkAllInputs = document.getElementsByClassName(‘check-all‘);//全选框
for (var i = 0, len = checkInputs.length; i < len; i++) { checkInputs[i].onclick = function () { if (this.className === ‘check-all check‘) { for (var j = 0; j < checkInputs.length; j++) { checkInputs[j].checked = this.checked; } } //子选框去掉一个，全选框应该为false if (this.checked == false) { for (var k = 0; k < checkAllInputs.length; k++) { checkAllInputs[k].checked = false; } }
//子选框全部选上的时候，全选框应该为true
var ch = 0;
for (var x = 1; x < checkInputs.length; x++) {
if (checkInputs[x].checked == true) {
ch++;
}
}
if (ch == (checkInputs.length - checkAllInputs.length)) {
for (var z = 0; z < checkAllInputs.length; z++) {
checkAllInputs[z].checked = true;
}
}
} }
}
</script></body>
</html>
时间： 2024-10-18 17:42:19