<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>表单全选</title>
<style>
</style>
</head>
<body>
<input type="checkbox" id="checkElt" onclick="checkAllOrCancleAll()">
<span id="checkAllOrNot">全选</span>
<br/>
运动<input type="checkbox" name="interest" value="sport" /><br>
旅游<input type="checkbox" name="interest" value="travel" /><br>
美食<input type="checkbox" name="interest" value="food" /><br>
音乐<input type="checkbox" name="interest" value="music" /><br>
<script>
function checkAllOrCancleAll(){
//获取全选按钮
var checkElt = document.getElementById('checkElt');
//获取选中状态
var checked = checkElt.checked;
//获取所有复选框
var allInterests = document.getElementsByName("interest");
//获取【全选】 文本
var checkAllOrNot = document.getElementById('checkAllOrNot');
if(checked){
for(var i=0;i<allInterests.length;i++){
allInterests[i].checked=true;
}
checkAllOrNot.innerHTML('取消全选');
}else{
for(var i=0;i<allInterests.length;i++){
allInterests[i].checked=false;
}
checkAllOrNot.innerHTML('全选');
}
}
</script>
</body>
</html>
js 表单全选和取消全选 
![2022秋招面试记录与反思[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)