<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var items = document.getElementsByName("items");
//获取四个多选框
/*--------------全选/全不选按钮-------------------------------------*/
var checkedAllBox = document.getElementById("checkedAllBox");
//获取全选/全不选元素
//为checkedAllBox元素绑定单击响应函数
checkedAllBox.onclick = function(){
for(var i=0;i<items.length;i++){
//设置多选框的状态
items[i].checked = this.checked;
//在事件的响应函数中,响应函数是给谁绑定的,this就是谁
}
};
/*
*如果四个多选框都选中,checkedAllBox应该也选中
*如果四个多选框都未选中,checkedAllBox应该也未选中
*/
//为四个多选框分别绑定单击响应函数
for(var i=0;i<items.length;i++){
items[i].onclick = function(){
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
//判断四个多选框是否全选
for(var j=0;j<items.length;j++){
//只要有一个未选中,就不是全选
if(!items[j].checked){
//将checkedAllBox设置为未选中
checkedAllBox.checked = false;
//一旦进入判断,则已得出结果,不用再执行循环
break;
}
}
}
}
/*---------------全选按钮------------------------------------------*/
var checkedAllBtn = document.getElementById("checkedAllBtn");
//获取checkedAllBtn按钮元素
//为checkedAllBtn元素绑定单击响应函数
checkedAllBtn.onclick = function(){
for(var i=0;i<items.length;i++){
//将四个多选框设置为选中状态
items[i].checked = true;
}
//将全选/全不选按钮设置为选中状态
checkedAllBox.checked = true;
}
/*---------------全不选按钮----------------------------------------*/
var checkedNoBtn = document.getElementById("checkedNoBtn");
//获取checkedNoBtn按钮元素
//为checkedNOBtn元素绑定单击响应函数
checkedNoBtn.onclick = function(){
for(var i=0;i<items.length;i++){
//将四个多选框设置为未选中状态
items[i].checked = false;
}
//将全选/全不选按钮设置为未选中状态
checkedAllBox.checked = false;
}
/*---------------反选按钮-----------------------------------------*/
var checkedRevBtn = document.getElementById("checkedRevBtn");
//获取checkedRevBtn按钮元素
//为checkedRevBtn元素绑定单击响应函数
checkedRevBtn.onclick = function(){
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;
}
/*
*如果四个多选框都选中,checkedAllBox应该也选中
*如果四个多选框都未选中,checkedAllBox应该也未选中
*/
checkedAllBox.checked = true;
//判断四个多选框是否全选
for(var j=0;j<items.length;j++){
//只要有一个未选中,就不是全选
if(!items[j].checked){
//将checkedAllBox设置为未选中
checkedAllBox.checked = false;
}
}
}
/*---------------提交按钮-----------------------------------------*/
var sendBtn = document.getElementById("sendBtn");
//获取sendBtn按钮元素
//为sendBtn元素绑定单击响应函数
sendBtn.onclick = function(){
for(var i=0;i<items.length;i++){
//判断多选框状态
if(items[i].checked){
//证明多选框已选中,则弹出值
alert(items[i].value);
}
}
}
};
</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>