全选2
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全选2相关的知识，希望对你有一定的参考价值。
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>
以上是关于全选2的主要内容，如果未能解决你的问题，请参考以下文章
请问checkbox如何产生级联的（全选，反选，不选）代码是啥样子的？