表单全选取消全选
案例分析：
1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可；
2.下面复选框需要全部选中，上面的全选才可以选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选框就不选中。
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单全选与取消全选</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
margin: 100px auto;
text-align: center;
border: 1px solid gray;
border-spacing: 0;
cursor: pointer;;
}
th,td{
border: 1px solid gray;
padding: 10px;
}
thead{
background-color: powderblue;
}
.bg{
background-color: rgb(190, 189, 189);
}
</style>
</head>
<body>
<div id="wrap">
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="select">
<tr>
<td><input type="checkbox"></td>
<td>iphone 8</td>
<td>3999</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iphone 8 plus</td>
<td>4999</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iphone 11</td>
<td>5999</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iphone 11 pro</td>
<td>9999</td>
</tr>
</tbody>
</table>
</div>
<script>
//设计鼠标移入和移出的背景变化
var trs=document.getElementById("select").querySelectorAll("tr");
for(var i=0;i<trs.length;i++){
//鼠标移入事件
trs[i].onmouseover=function(){
this.className="bg";
}
//鼠标移出事件
trs[i].onmouseout=function(){
this.className="";
}
}
//1.全选和取消全选
//获取元素
var selectAll=document.getElementById("selectAll"); //全选按钮
var select=document.getElementById("select").getElementsByTagName("input"); //下面所有的复选框
//注册事件
selectAll.onclick=function(){
//this.checked可以得到当前复选框的选中状态，如果是true则表示选中，如果是false就表示未选中
for(var i=0;i<select.length;i++){
//看全选框是否全选，把它的选中状态赋值给下面所有的复选框
select[i].checked=this.checked;
}
}
//2.判断下面的是否全选
for(var i=0;i<select.length;i++){
select[i].onclick=function(){
var flag=true; //注意flag要放在点击事件里……
//下面的变量i是在另一个函数里，和外层的i是不同的作用域
for(var i=0;i<select.length;i++){
if(!select[i].checked){
flag=false;
break;
}
}
selectAll.checked=flag;
}
}
</script>
</body>
</html>