浏览网页时我们经常能见到全选选项，比如双十一剁手清空购物车时，就会用到一键全选，但是全选与取消全选的思维是什么呢？
思路：我们会利用多选框的 checked 属性来完成，checked 的返回值是一个 Boolean 类型的值，勾选返回 true ，不勾选返回 false。
全选与取消全选的 JS 代码实现：（文章最后有完整代码参考）
qx是获取的全选选项的元素，xz是获取的要选择的所有元素（this.checked 为全选选项是否选择，选择了返回 true ，没有选择则返回 false，并将此结果利用循环赋值给每一个选项）
var qx=document.getElementById('qx');
var xz=document.querySelector('tbody').querySelectorAll('input');
qx.onclick=function(){
for(var i=0;i<xz.length;i++){
xz[i].checked=this.checked;
}
}
单独选项全部选完后全选选项自动勾选的 JS 代码：
先遍历注册事件，然后第二个 for循环的作用为检查是否所有的选项框都选择了，如果没有选择某一个选项，即 ！xz[i].checked ，然后赋值给 flag 为 false，如果全选了则为 true 不变，最后把flag 的值返回给全选框的 checked
var qx=document.getElementById('qx');
var xz=document.querySelector('tbody').querySelectorAll('input');
for(var i=0;i<xz.length;i++){
xz[i].onclick=function(){
var flag=true;
for(var i=0;i<xz.length;i++){
if(!xz[i].checked){
flag=false;
break;
}
}
qx.checked=flag;
}
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
margin: 270px auto;
width: 500px;
height: 350px;
border: 1px solid;
border-spacing: 0;
font-size: 20px;
font-weight:500;
}
td{
border: 1px solid;
padding-left: 10px;
}
.qxbox{
padding:20px 10px;
background-color: rgb(106, 183, 255);
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td class="qxbox"><label
><input type="checkbox" id="qx"> 全选</label></td>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" id="1"> <label for="1">选项一</label></td>
</tr>
<tr>
<td> <input type="checkbox" id="2"> <label for="2"> 选项二</label></td>
</tr>
<tr>
<td> <input type="checkbox" id="3"> <label for="3">选项三</label> </td>
</tr>
<tr>
<td> <input type="checkbox" id="4"> <label for="4">选项四</label> </td>
</tr>
</tbody>
</table>
<script>
var qx=document.getElementById('qx');
var xz=document.querySelector('tbody').querySelectorAll('input');
qx.onclick=function(){
for(var i=0;i<xz.length;i++){
xz[i].checked=this.checked;
}
}
for(var i=0;i<xz.length;i++){
xz[i].onclick=function(){
var flag=true;
for(var i=0;i<xz.length;i++){
if(!xz[i].checked){
flag=false;
break;
}
}
qx.checked=flag;
}
}
</script>
</body>
</html>
