首页 > 代码库 > 全选2

全选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>
View Code

 

<!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