实现以下功能：
（1）当选中表头的商品 价格前的checkbox框时，下面的每个商品都会被选中。（全选）
（2）当选中所有商品时，表头的商品 价格前的checkbox框自动被选中。（反选）
（3）只要有一个商品没被选中，表头的商品 价格前的checkbox框就不会被选中。
<!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>效果：
全选：
反选
