Implement the following functions:
(1) When the checkbox box in front of the product price in the header is selected, each product below will be selected. (select all)
(2) When all commodities are selected, the checkbox box before the commodity price in the table header is automatically selected. (reverse election)
(3) As long as one product is not selected, the checkbox box before the price of the product in the header will not be selected.
<!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>
</head>
<body>
<div class="wrap">
<table>
<!-- 表头 -->
<thead>
<tr>
<th>
<input type="checkbox" id="all">
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>ipad</td>
<td>4333</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>手机</td>
<td>2333</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>笔记本电脑</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>智能笔</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
//1.全选和取消全选：全部的checkbox为选中状态
//获取标签
var all=document.getElementById('all');
//三种方式获取tbody下全部的input标签
//var tb=document.getElementById('tb').getElementsByTagName('input');
//var tb=document.querySelector('tbody').querySelectorAll('input');
var tb=document.querySelectorAll('tbody input');
//console.log(tb);//数组形式输出
all.onclick=function(){
//this.checked:可以获取当前复选框的选中状态，true:选中，false:未选中
console.log(this.checked);//this指向bll，即：th行。谁调用事件，this就指向谁
for(var i=0;i<tb.length;i++){
//跟随全选按钮
tb[i].checked=this.checked;
}
}
//2.td行全选时，th行才能选中
//给td行绑定点击事件，循环查看是否有没选中的，若有至少一个没选中，则th行不能选中
for(var i=0;i<tb.length;i++){
tb[i].onclick=function(){
//flag，用来判断th行是否被选中
var flag=true;
for(var i=0;i<tb.length;i++){
if(!tb[i].checked){
flag=false;
break;//只要一个为false(没选中),剩下的td行无需再判断是否被选中
}
}
all.checked=flag;
}
}
</script>
</html>Effect:
select all:
reverse election
