<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
你爱好的运动？
<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br />
<input type="checkbox" name="items" id="" value="足球" />足球
<input type="checkbox" name="items" id="" value="篮球" />篮球
<input type="checkbox" name="items" id="" value="羽毛球" />羽毛足球
<input type="checkbox" name="items" id="" value="乒乓球" />乒乓球
<br />
<input type="button" name="" id="checkAllBtn" value="全 选" />
<input type="button" name="" id="checkNoBtn" value="全不选" />
<input type="button" name="" id="checkRevBtn" value="反 选" />
<input type="button" name="" id="sendBtn" value="提 交" />
</form>
</body>
<script type="text/javascript">
//获取4个多选框 name获取
var items=document.getElementsByName("items");
//1.全选 #checkAllBtn
var checkAllBtn=document.getElementById("checkAllBtn");
checkAllBtn.onclick=function(){
//遍历
for(i=0;i<items.length;i++){
//设置4个多选框为选中状态
//alert(items[i].checked);
items[i].checked=true;
}
checkedAllBox.checked=true;//吧全选/全不选也带上
};
//2.全不选 #checkNoBtn
var checkNoBtn=document.getElementById("checkNoBtn");
checkNoBtn.onclick=function(){
for(i=0;i<items.length;i++){
//设置4个多选框为选中状态
//alert(items[i].checked);
items[i].checked=false;
}
checkedAllBox.checked=false;//吧全选/全不选也带上
};
//3.反选 #checkRevBtn
var checkRevBtn=document.getElementById("checkRevBtn");
checkRevBtn.onclick=function(){
for(i=0;i<items.length;i++){
//alert(items[i].checked);
//反选
items[i].checked=!items[i].checked;
}
//反选对checkedAllBox也要有判断4个复选框是否全部选中效果，粘贴了下面那段
//初始化checkedAllBox值，使4个复选框又全部选中时，checkedAllBox为选中
checkedAllBox.checked=true;
//判断4个复选框是否全部选中，只要一个没选中，就是没全部选中
for(j=0;j<items.length;j++){
//进入判断了，表示有一个或多个没选中了
if(!items[j].checked){
checkedAllBox.checked=false;
//一旦判断，即为全不选了，对j++后面的不用判断了，优化
break;
}
}
};
//4.提交 #sendBtn
var sendBtn=document.getElementById("sendBtn");
sendBtn.onclick=function(){
for(i=0;i<items.length;i++){
if(items[i].checked){
//弹出value属性值
alert(items[i].value);
}
}
};
//5.全选/全不选 #checkedAllBox
var checkedAllBox=document.getElementById("checkedAllBox");
checkedAllBox.onclick=function(){
//alert("checkedAllBox");
//使4个多选框的勾选与全选/全不选的相同
for(i=0;i<items.length;i++){
//使4个多选框的勾选与全选/全不选的相同
items[i].checked=checkedAllBox.checked;
}
};
//6.items
/*
* #checkedAllBox，与4个复选框同步，
*/
//为4个复选框分别绑定单击函数，单击后#checkedAllBox改变
for(i=0;i<items.length;i++){
items[i].onclick=function(){
//alert('hello');
//初始化checkedAllBox值，使4个复选框又全部选中时，checkedAllBox为选中
checkedAllBox.checked=true;
//判断4个复选框是否全部选中，只要一个没选中，就是没全部选中
for(j=0;j<items.length;j++){
//进入判断了，表示有一个或多个没选中了
if(!items[j].checked){
checkedAllBox.checked=false;
//一旦判断，即为全不选了，对j++后面的不用判断了，优化
break;
}
}
};
}
</script>
</html>