<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
//获取四个多选框items
var items = document.getElementsByName("items")
/*
* 全选按钮，点击按钮以后，四个多选框全都被选中
* */
//1.#checkedAllBtn
//为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
//遍历items
for (var i = 0; i < items.length; i++) {
//设置四个多选框编程选中状态
//通过多选框的checked属性可以来获取或设置多选框的选中状态
// alert(items[i].checked);
items[i].checked = true;
}
checkedAllBox.checked = true;
};
//2.#checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function () {
//遍历items
for (var i = 0; i < items.length; i++) {
//设置四个多选框编程选中状态
//通过多选框的checked属性可以来获取或设置多选框的选中状态
// alert(items[i].checked);
items[i].checked = false;
}
checkedAllBox.checked = false;
};
//3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function () {
//遍历items
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
}
checkedAllBox.checked = true;
//遍历各个选项的状态
for (var j = 0; j < items.length; j++) {
if (!items[j].checked) {
//一旦进入判断，则证明不是全选状态
//将checkedALlBox设置为没选中状态
checkedAllBox.checked = false;
}
}
}
/*
* 提交按钮：
* - 点击按钮以后，将所有选中的多选框的value属性值弹出
* */
//4.sendBtn
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
//遍历items
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
alert(items[i].value);
}
}
}
/*
* 在事件的响应函数中，想躺赢函数是给谁绑定的this就是谁
* */
//5.#checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
// alert(this === checkedAllBox)
//设置多选框的选中状态
for (var i = 0; i < items.length; i++) {
items[i].checked = checkedAllBox.checked;
}
}
//6.#items
/*
* 如果四个多选框全都选中，则checkAllBox也应该选中
* 如果四个多选框没都选中，则checkAllBox应不应该选中
* */
//为四个多选框分别绑定响应函数
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
//首先将checkedAllBox设置为true
checkedAllBox.checked = true;
//遍历各个选项的状态
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/>
<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>
