<!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>
</head>
<body>
<script>
window.onload = function () {
//1.#checkedAllBtn
/*
全选按钮：点击按钮后，四个多选框全部选中
*/
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
//设置四个多选框为选中
var items = document.getElementsByName("items");
for (i in items) {
items[i].checked = true;
}
//将全选全不选设置为选中
checkedAllBox.checked = true;
}
//2.#checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function () {
//设置四个多选框为不选中
var items = document.getElementsByName("items");
for (i in items) {
items[i].checked = false;
}
//将全选全不选设置为不选中
checkedAllBox.checked = false;
}
//3.#checkkedRevBtn
//反选按钮，选中变没选中，没选中变选中
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function () {
//设置四个多选框为不选中
var items = document.getElementsByName("items");
for (i in items) {
items[i].checked = !items[i].checked;
}
}
//4.#sendBtn
//提交按钮：点击按钮以后，将所有选中的多选框弹出
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
//设置四个多选框为不选中
var items = document.getElementsByName("items");
for (i in items) {
if (items[i].checked == true) {
alert(items[i].value);
}
}
}
//5.#checkedAllBox
//在事件的响应函数中，响应函数是给谁绑定的this就是谁
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
var items = document.getElementsByName("items");
for (i in items) {
items[i].checked = this.checked;
}
}
//6.items
//如果items都选中则全选选择框亮起，items有一个未选，则全选熄灭
var items = document.getElementsByName("items");
for(var i =0; i<items.length; i++){
items[i].οnclick=function(){
checkedAllBox.checked = true;
for(var i =0; i<items.length; i++){
if(!items[i].checked){
checkedAllBox.checked = false;
}
}
}
}
}
</script>
<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>
