思路：全选按钮和子按钮分开考虑，当全选按钮选中的时候，也就是其checked为true的时候，所有的子按钮也全都为true，反之，则为false。子按钮的想法是，当点击某一个子按钮的时候，会看一下是否所有的子按钮都被选中，如果都选中，则全选按钮也同时为true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
user-select: none;
}
table{
width: 500px;
height: 200px;
margin: 15px 0 0 15px;
text-align: center;
}
table td{
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table .lasttd,.lastth{
border-right: 1px solid #ccc;
}
table th{
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" class="check-all" ></th>
<th>菜品</th>
<th class="lastth">价格</th>
</tr>
<tr>
<td><input type="checkbox" ></td>
<td>宫保鸡丁</td>
<td class="lasttd">10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>宫保鸡丁</td>
<td class="lasttd">10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>宫保鸡丁</td>
<td class="lasttd">10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>宫保鸡丁</td>
<td class="lasttd">10</td>
</tr>
</table>
<script>
var checkAll=document.querySelector(‘.check-all‘);
var checklist=document.querySelectorAll(‘td input‘);
var num=0;
// console.log(checklist)
//全选按钮
checkAll.onclick=function(){
if(checkAll.checked){
for(var i=0;i<checklist.length;i++){
checklist[i].checked=true;
}
num=checklist.length;
}else{
for(var i=0;i<checklist.length;i++){
checklist[i].checked=false;
}
num=0;
};
}
//子按钮
for(var i=0;i<checklist.length;i++){
checklist[i].onclick=function(){
if(this.checked) num++;
else num--;
if(num==checklist.length)
checkAll.checked=true;
else checkAll.checked=false;
}
}
</script>
</body>
</html>