<!DOCTYPE html>
<html lang="zh">
<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>JS全选、取消、反选、提交</title>
<script>
window.onload = function(){
// 获取全选按钮
const allBtn = document.getElementById("all");
// 获取全选复选框
const checkAllBox = document.getElementById("check-all");
// 获取取消按钮
const noBtn = document.getElementById("no");
// 获取反选按钮
const reverseBtn = document.getElementById("reverse");
// 获取4个爱好复选框
const hobbies = document.getElementsByName("hobby");
// 为全选按钮绑定单击响应函数
allBtn.onclick = function(){
// 将4个复选框设置为选中状态
for(let i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
// 将全选复选框设置为选中状态
checkAllBox.checked = true;
};
// 为取消按钮绑定单击相应函数
noBtn.onclick = function(){
// 将4个复选框设置为取消状态
for(let i = 0; i < hobbies.length; i++){
hobbies[i].checked = false;
}
// 将全选复选框设置为取消状态
checkAllBox.checked = false;
};
// 为反选按钮绑定单击相应函数
reverseBtn.onclick = function(){
for(let i = 0; i < hobbies.length; i++){
hobbies[i].checked = !hobbies[i].checked;
}
// 获取所有选中的checkbox
const checkedBox = document.querySelectorAll("[name=hobby]:checked");
// 判断hobbies是否全选，如果全选了 全选复选框 设置为选中状态，否则设置为取消状态
if (hobbies.length === checkedBox.length) {
checkAllBox.checked = true;
} else {
checkAllBox.checked = false;
}
};
// 为全选复选框绑定单击相应函数
checkAllBox.onclick = function(){
for(let i = 0; i < hobbies.length; i++){
// 在事件的响应函数中，响应函数绑定给谁 this就是谁（箭头函数除外）
hobbies[i].checked = this.checked;
}
};
// 使全选checkbox和四个爱好checkbox同步
for(let i = 0; i < hobbies.length; i++){
hobbies[i].onclick = function(){
// 获取所有爱好复选框 选中的checkbox
const checkedBoxs = document.querySelectorAll("[name=hobby]:checked");
// 判断hobbies是否全被选中
if(hobbies.length === checkedBoxs.length){
checkAllBox.checked = true;
}else{
checkAllBox.checked = false;
}
};
}
// 提交按钮
const sendBtn = document.getElementById("send");
sendBtn.onclick = function(){
for (let i = 0; i < hobbies.length; i++) {
hobbies[i].checked && alert(hobbies[i].value);
}
};
};
</script>
</head>
<body>
<div>
<form action="#">
<div>
请选择你的爱好：
<input type="checkbox" id="check-all" /> 全选
</div>
<div>
<input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="羽毛球" /> 羽毛球
<input type="checkbox" name="hobby" value="足球" /> 足球
</div>
<div>
<button type="button" id="all">全选</button>
<button type="button" id="no">取消</button>
<button type="button" id="reverse">反选</button>
<button type="button" id="send">提交</button>
</div>
</form>
</div>
</body>
</html>
