- A+
所属分类：Web前端
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<label for="checkedAllBox">你爱好的运动是？</label><input type="checkbox" id="checkedAllBox"/>全选/全不选
<br/>
<!--定义了复选框type="checkbox". 用户需要从若干给定的选择中选取一个或若干选项。-->
<label>
<input type="checkbox" name="items" value="足球"/>
足球
</label>
<label>
<input type="checkbox" name="items" value="蓝球"/>
蓝球
</label>
<label>
<input type="checkbox" name="items" value="羽毛球"/>
羽毛球
</label>
<label>
<input type="checkbox" name="items" value="乒乓球"/>
乒乓球
</label>
<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>
<script>
function myClick1(idStr,fun){
//全选/全不选框的地址
var checkedAllBox=document.getElementsByName("checkedAllBox");
// 全选按钮：点击按钮之后，四个多选框全都被选中
const btn=document.getElementById(idStr);
btn.onclick=fun;
}
// 全选框
myClick1("checkedAllBtn",function () {
var items=document.getElementsByName("items");
//items为一个数组，需要遍历
for(let i=0;i<items.length;i++){
//设置四个多选框变成选中状态
//通过多选框的checked属性获取或设置多选框的选中状态
items[i].checked=true;
}
checkedAllBox.checked=true;
});
// 全不选按钮：点击之后，四个多选框全都不被选中
myClick1("checkedNoBtn",function () {
var items = document.getElementsByName("items");
for(let i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false;
});
// 反选：点击之后选中的变成没选中，没选中的选中
myClick1("checkedRevBtn",function () {
var items=document.getElementsByName("items")
for(let i=0;i<items.length;i++){
/* if(items[i].checked===false){
items[i].checked=true;
}
else{
items[i].checked=false;
}*/
//反选时也需要判断四个多选框是否全部选中
items[i].checked=!items[i].checked;
checkedAllBox.checked=true;
//判断四个多选框是否全选,只要有一个没选中就不是全选
for(let j=0;j<items.length;j++) {
if (!items[j].checked) {
// 一旦进入判断，则证明不是全选状态
// 将checkedAllBox设置为没选中
checkedAllBox.checked = false;
}
}
}
/* checkedAllBox.checked=true;
for(let j=0;j<items.length;j++){
//判断四个多选框是否全选,只要有一个没选中就不是全选
if(!items[j].checked){
// 一旦进入判断，则证明不是全选状态
// 将checkedAllBox设置为没选中
checkedAllBox.checked=false;
break;
}
}*/
});
// 提交按钮:点击之后所有多选框的value属性值弹出
myClick1("sendBtn",function () {
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
if(items[i].checked===true){
alert(items[i].value)}}
});
//全选中或全不选中
myClick1("checkedAllBox",function () {
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
// items[i].checked=checkedAllBox.checked;
items[i].checked=this.checked;
}
});
/*如果四个多选框全都选中，则checkAllBox也应该选中
如果四个多选框全都不选中，则checkAllBox也应该不选中*/
//为四个多选框分别绑定点击响应函数
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
items[i].onclick=function () {
checkedAllBox.checked=true;
for(let j=0;j<items.length;j++){
//判断四个多选框是否全选,只要有一个没选中就不是全选
if(!items[j].checked){
// 一旦进入判断，则证明不是全选状态
// 将checkedAllBox设置为没选中
checkedAllBox.checked=false;
break;
}
}
}
}
</script>
