**
JS 原生实现复选框全选反选功能
**
按钮功能实现思路：
全选按钮： 直接将全选按钮的状态赋值给每一个 复选框。
复选框：只有当所有的复选框选中时，全选按钮才能选中，所以每当复选框每点击一次就要检测所有的复选框有没有选中，本方法是设置一个开关flag ， 来筛选出复选框都选中的情况。
反选按钮功能：直接将此时按钮的状态取反即可。
<body>
<input type="checkbox" id="checkbox">全选 <input type="button" id="btn" value="反选"><br />
<input type="checkbox" class="inp"> 张三<br />
<input type="checkbox" class="inp"> 李四 <br />
<input type="checkbox" class="inp"> 王五
<script>
let checkbox = document.getElementById('checkbox'); //全选按钮
let btn = document.getElementById('btn'); //反选按钮
let inp = document.querySelectorAll('.inp'); // 小按钮
// 设置全选
checkbox.onclick = function () {
for (var i = 0; i < inp.length; i++) {
inp[i].checked = this.checked; // 这个里的 是将全选按钮的状态赋值给所有的inp
}
};
// 设置小按钮
// 要个每一个按钮都要绑定点击事件 所以需要循环 ，
for (let i = 0; i < inp.length; i++) {
inp[i].onclick = function () {
let flag = true;
// 每点击一个小按钮 就要检测 所有的小按钮是否都全选了 设置了一个 开关
for (let i = 0; i < inp.length; i++) {
if (!inp[i].checked) {
flag = false;
}
}
checkbox.checked = flag;
}
};
// 反选
btn.onclick = function (){
for(let i = 0 ; i < inp.length ; i++){
if(inp[i].checked){
inp[i].checked = false;
checkbox.checked = false;
}else{
inp[i].checked = true;
checkbox.checked = true;
}
}
};
</script>
</body>
实现复选框还有另外一种更加简便的方法：
功能实现思路： 当复选框的选中个数 等于 复选框的个数 时 ，代表复选框已经全部选中，就要将全选按钮选中。
for (var i = 0; i < inp.length; i++) {
inp[i].onclick = function () {
let Select = document.querySelectorAll('.inp:checked').length; // 获得此时选中的复选框的数量
//复杂点写法：
// if (Select == inp.length) { // 判断：复选框选中的个数 是否等于 复选框的个数 ， 返回值 true / false
// checkbox.checked = true;
// } else {
// checkbox.checked = false;
// };
//简便写法：
checkbox.checked = Select == inp.length; // 直接将 判断复选框选中的个数 是否等于 复选框的个数的结果赋值给全选按钮
}
};