次の機能を実装します。
(1) ヘッダーの商品価格の前にあるチェックボックスを選択すると、以下の各商品が選択されます。（すべて選択）
(2) すべての商品を選択すると、テーブルヘッダーの商品価格の前にあるチェックボックスボックスが自動的に選択されます。（逆選挙）
(3) 1 つの製品が選択されていない限り、ヘッダーの製品価格の前にあるチェックボックス ボックスは選択されません。
<!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>効果：
すべて選択：
逆選挙
