<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{border-collapse: collapse;}
td{border: 1px solid #000000;width: 100px;height: 30px;text-align: center;}
</style>
</head>
<body>
<table>
<tr>
<td><input id="allCheck" type="checkbox"><label for="allCheck">全选</label></td>
</tr>
<tr>
<td><input id="check0" type="checkbox"><label for="check0">选项0</label></td>
</tr>
<tr>
<td><input id="check1" type="checkbox"><label for="check1">选项1</label></td>
</tr>
<tr>
<td><input id="check2" type="checkbox"><label for="check2">选项2</label></td>
</tr>
<tr>
<td><input id="check3" type="checkbox"><label for="check3">选项3</label></td>
</tr>
<tr>
<td> <input id="check4" type="checkbox"><label for="check4">选项4</label></td>
</tr>
</table>
<script>
var allCheck=document.getElementById("allCheck");
allCheck.addEventListener("click",clickHandle);
for(var i=0;i<5;i++){
var check = document.getElementById("check"+i);
check.addEventListener("click",clickHandle);
}
function clickHandle(e){
if(this===allCheck){
for(var i=0;i<5;i++){
// 让所有的多选框的checked和全选的相同
var check = document.getElementById("check"+i);
check.checked=allCheck.checked;
}
return;//终结后面的代码
}
var bool=true;
for(var j=0;j<5;j++){
var checks = document.getElementById("check"+j);
if(!checks.checked){
bool=false;
}
}
allCheck.checked=bool;
}
</script>
</body>
</html>
运行结果
来源：CSDN
作者：你知道歌谣吗？
链接：https://blog.csdn.net/weixin_43392489/article/details/104043122