当点击全选的时候,4多选框全部选上、当点击全不选的时候,4个多选框都不选、当点击反选的时候,点击按钮以后选中的变成没选中,没选中变成选中、当点击提交按钮时,点击按钮以后,将所有选中的多选框value属性值弹出、
当全选/全部选按钮选择或取消下面4个多选框,全选或不选
当4个多选框全选后,全选/全部选按钮才被选中
在反选的时候也应判断4个是否为选中状态:若全选中则,全选/全部选按钮选中
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
window.onload = function () {
var checkedAllBox = document.getElementById("checkedAllBox");
//设置全选
//为id#checkedAllBtn的按钮绑定一个响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
//获取4个多选框的items
var items = document.getElementsByName("items");
//设置4个多选框变成选中状态
//遍历数组
for (var i = 0; i < items.length; i++) {
//通过多选框checked属性可以用来获取或设置多选框为选中状态
items[i].checked = true;
}
checkedAllBox.checked = true;//将最上面全选/全不选按钮设置为选中
};
//设置全不选
//为id#checkedNoBtn的按钮绑定一个响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function () {
//获取4个多选框的items
var items = document.getElementsByName("items");
//设置4个多选框变成不选中状态
//遍历数组
for (var i = 0; i < items.length; i++) {
//通过多选框checked属性可以用来获取或设置多选框为选中状态
items[i].checked = false;
}
checkedAllBox.checked = false;//将最上面全选/全不选按钮设置为不选中
};
//设置反选 点击按钮以后选中的变成没选中,没选中变成选中
//为id#checkedRevBtn的按钮绑定一个响应函数
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function () {
//获取4个多选框的items
var items = document.getElementsByName("items");
//遍历数组
for (var i = 0; i < items.length; i++) {
//判断多选框的选中转态
/* if (items[i].checked) {
//已选中,设置没选中
items[i].checked = false;
} else {
items[i].checked = true;
} */
items[i].checked = !items[i].checked;//如果是true,赋值一个false
}
//在反选时也需要判断4个多选框是否全部选中
//默认将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
//判断4个多选框是否全选
for (var j = 0; j < items.length; j++) {
//只要有一个没有选中,则不是全选
if (!items[j].checked) {
//一旦进入,则证明不是全选中状态
//则将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
break;//一旦进入判断,则已经知道结果,不用在继续执行循环
}
}
};
//提交按钮,点击按钮以后,将所有选中的多选框value属性值弹出
//为id#sendBtn的按钮绑定一个响应函数
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
//获取4个多选框的items
var items = document.getElementsByName("items");
//遍历items
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
alert(items[i].value);//如果要读取元素节点的属性,直接用元素.属性名,
}
}
};
//上面的全选/全部选 设置
//为checkAllBox绑定单击响应事件
/*
在事件的响应函数中,响应函数是给谁绑定的this就是谁,下面是给checkedAllBox绑定的this就是checkedAllBox
*/
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
//获取4个多选框的items
var items = document.getElementsByName("items");
//设置多选框的的选中状态
for (var i = 0; i < items.length; i++) {
items[i].checked = checkedAllBox.checked;
}
};
//如果4个多选框都选中,则checkedAllBox也选中,如果4个多选框没有都选中,则checkedAllBox也不选中
//为4个多选框分别绑定点击响应函数
//获取4个多选框的items
var items = document.getElementsByName("items");
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
//默认将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
//判断4个多选框是否全选
for (var j = 0; j < items.length; j++) {
//只要有一个没有选中,则不是全选
if (!items[j].checked) {
//一旦进入,则证明不是全选中状态
//则将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
break;//一旦进入判断,则已经知道结果,不用在继续执行循环
}
}
};
}
};
</script>
</head>
<body>
<form action="" method="post">
你爱好的运动是:<input type="checkbox" id="checkedAllBox">全选/全部选
<br>
<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>
<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>
运行结果