<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<script>
window.onload = function(){
//获取四个单选框
let items = document.getElementsByName("items");
//获取全不选/全选框
let checkedAllBox = document.getElementById("checkedAllBox")
//全选按钮
let checkedAllBtn = document.getElementById("checkedAllBtn");
//获取不选按钮
let checkedNoBtn = document.getElementById("checkedNoBtn");
//获取反选按钮
let checkedRevBtn = document.getElementById("checkedRevBtn");
//获取提交按钮
let sendBtn = document.getElementById("sendBtn");
checkedAllBtn.onclick = function(){
//遍历items
//console.log(items)//返回一个数组
items.forEach(function(item){
//设置四个多选框的选中状态
item.checked = true;
})
checkedAllBox.checked = true
}
//全不选
checkedNoBtn.onclick = function(){
//遍历items
//console.log(items)//返回一个数组
items.forEach(function(item){
//设置四个多选框的选中状态
item.checked = false;
})
checkedAllBox.checked =false
}
//反选
checkedRevBtn.onclick = function(){
//先将checkedAllBox设置为true
checkedAllBox.checked = true
//遍历items
//console.log(items)//返回一个数组
items.forEach(function(item){
//设置四个多选框的选中状态
// if(item.checked == true){
// item.checked = false;
// }else{
// item.checked = true;
// }
item.checked = !item.checked
if(!item.checked){
checkedAllBox.checked = false
}
})
}
//提交
sendBtn.onclick = function(){
//遍历items
//console.log(items)//返回一个数组
items.forEach(function(item){
if(item.checked){
alert(item.value)
}
})
}
//全选box
checkedAllBox.onclick = function(){
//遍历items
items.forEach(function(item){
item.checked = !item.checked
})
}
//items
items.forEach(function(item){
item.onclick = function(){
checkedAllBox.checked = true
items.forEach(function(item){
if(!item.checked){
checkedAllBox.checked = false
}
})
}
})
}
</script>
</head>
<body>
<form action="">
你爱好的运动是什么？<input type="checkbox" id="checkedAllBox" /> 全不选/全选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>
