首页 > 代码库 > checkbox 全选，反选 ，全不选
checkbox 全选，反选 ，全不选
在表格或者列表中经常会遇到要全选或者反选等交互，今天总结了一下代码，保留着以后直接拿来用
原理：
1. 全选：当全选checkbox被点击（不管点击之前是什么状态）后，获取其checked状态。然后对列表进行循环检测，此时可以将所有的（无论之前什么状态），设为选中，也可对未选中的进行选中。
2. 反选：当反选checkbox被点击（不管点击之前是什么装填）后，获取其其状态值，对列表进行循环检测，将被检测的元素的checked状态反向处理，即可。
3. 列表全选或者不全选：当列表中的任意一个checkbox被点击，侧应该对列表中的所有checkbox进行循环检测，如果此时全部选中，则应将全选checked选中，如果有至少一个没被选中，则应将全选checkbox取消选中。
代码实现：
为了测试代码的正确性，建立如下的HTML文档：
<!DOCTYPE html>
<html>
<head>
<title>checkbox测试</title>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" id="allChecked"><span>全选</span></td>
<td><input type="checkbox" id="antiChecked"><span>全选</span></td>
</tr>
<tr>
<td><input type="checkbox" class="sonChecked"></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" class="sonChecked"></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" class="sonChecked"></td>
<td>3</td>
</tr>
</tr>
<td><input type="checkbox" class="sonChecked"></td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" class="sonChecked"></td>
<td>5</td>
</tr>
</table>
</body>
</html>
//全选（id="allChecked"） 反选（id="antiChecked"） 选项列表（class="sonChecked"） 选择使用id，class， name等属性作为选择器都可以，根据自己的文档来确定。
//javascript代码（原生的）
//条件检测，兼容性
if(!document.getElementById) return;
var allCheck = document.getElementById(‘allChecked‘);
var antiCheck = document.getElementById(‘antiChecked‘);
//条件检测，兼容性
if(!document.getElementsByClassName) return;
var sonChecks = document.getElementsByClassName(‘sonChecked‘);
//全选操作
allCheck.click = function(){
var allCheckState = allCheck.checked;
for(var i = 0;i<listChecks.length; i++){
if(listChecks[i].checked!=allCheckState){
listChecks[i].click();
}
}
}
//反选操作
antiCheck.click= function(){
for(var i = 0;i<listChecks.length;i++){
listChecks[i].click();
}
}
//列表项行为
for(var i = 0;i<listChecks.length;i++){
listChecks[i].click= function(){
for(var i=0;i<listChecks.length;i++){
if(!listChecks[i].checked){
allCheck.checked = false;
return;
}
}
allCheck.checked = true;
}
}
//也可以将这几个方法直接封装成函数，然后传入参数，直接调用，但如果是这样的话不建议在HTML里面使用 onchange="function(A,B)"之类的，应该将javascript与HTML分离。