以下时多选框的全选、全不选、反选和提交的练习，注意看注释，将思路理清楚
<!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>
<link rel="stylesheet" type="text/css" href="css/checkbox.css">
<script type="text/javascript">
// function myClick(btn,fun){
// var btn = document.getElementById("btn");
// btn.onclick = fun;
// }
window.onload = function(){
/*
1.id为allCheckBtn
2.id为noCheckBtn
3.id为fanBtn
4.id为tjBtn
5.id为allCheckBox
6.items
*/
//1.全选按钮的功能：点击按钮之后，所有的都被选中
//为id为allCheckBtn绑定单击事件
var allCheckBtn = document.getElementById("allCheckBtn");
var allCheckBox = document.getElementById("allCheckBox");
allCheckBtn.onclick = function(){
//设置，让四个多相框变成选中状态
//获取多选框
var items = document.getElementsByName("items");
//遍历items
for(i = 0; i < items.length; i++){
//使四个多选框都变成选中状态
//通过checked属性，可以获取或者设置多选框的选中状态
items[i].checked = true;
}
//将全选/全不选按钮设置为true
allCheckBox.checked = true;
};
//2.全不选按钮的功能：点击按钮，使所有的多选框都不被选中
var noCheckBtn = document.getElementById("noCheckBtn");
noCheckBtn.onclick = function(){
//设置，让四个多相框变成未选中状态
//获取多选框
var items = document.getElementsByName("items");
//遍历items
for(var i = 0; i < items.length; i++){
//使四个多选框都变成选中状态
//通过checked属性，可以获取或者设置多选框的选中状态
items[i].checked = false;
}
//将全选/全不选按钮设置为false
allCheckBox.checked = false;
};
//3.反选按钮的功能,点击反选按钮，让被选中的选项不被选中，没有被选中的选项变成被选中的状态
var fanCheckBtn = document.getElementById("fanCheckBtn");
fanCheckBtn.onclick = function(){
//设置全选框的状态默认为true，如果一直没有进入下面的判断，则证明四个选项都被选中了
allCheckBox.checked = true;
var items = document.getElementsByName("items");
for(i = 0; i < items.length; i++){
// //判断多选框的状态,如果多选框已被选中，就将其设置为未选中状态，反之设置为选中状态
// if(items[i].checked ==true){ //items.checked本身就是布尔值，注意判断的时候等于是两个等号
// items[i].checked = false;
// }else{
// items[i].checked = true;
// }
items[i].checked = !items[i].checked;//对其进行取反，比if...else更加方便
//只要有一个没有背选中，就代表四个多选框没有背全选
//只要进入下面的判断，就证明不是全选,将allCheckBox设置为flase状态
if(!items[i].checked){
allCheckBox.checked = false;
}
}
//在反选操作时，也要对全选/全不选的选项框进行判断
/*
要将如下被代码整合到反选按钮的功能中，以上时已经整理好的代码，注意理解，理清楚思路
*/
// //设置全选框的状态默认为true，如果一直没有进入下面的判断，则证明四个选项都被选中了
// allCheckBox.checked = true;
// for(j=0;j<items.length;j++){
// //判断四个多选框是否被全部选中
// //只要有一个没有背选中，就代表四个多选框没有背全选
// //只要进入下面的判断，就证明不是全选,将allCheckBox设置为flase状态
// if(!items[j].checked){
// allCheckBox.checked = false;
// //只要进入判断，就能直接得到结果为false,不用在对后面的数据进行重复判断了，可以跳出循环,提高代码执效率
// break;
// }
// }
};
//4.提交按钮的功能，点击按钮，将被选中的选项显示
var tjBtn = document.getElementById("tjBtn");
tjBtn.onclick = function(){
var items = document.getElementsByName("items");
for(var i = 0; i < items.length; i++){
//对多选框的状态进行判断
if(items[i].checked == true){
alert(items[i].value);
}
}
};
//5.全选/全不选多选框的功能：当多选框选中时，所有的都被选中，多选框没有被选中，则所有的都不被选中
allCheckBox.onclick = function(){ //绑定单击响应函数
var items = document.getElementsByName("items");
for(var i=0; i<items.length; i++){
// items[i].checked = allCheckBox.checked;//这种方法不如下面的好使
items[i].checked = this.checked;//在事件的响应函数中，响应函数使为谁绑定的，this就是谁
}
};
//6.处理选项没有全选，但是allCheckBox仍然选中，或者选项全部选中，但allCheckBox没有选中的问题
//为四个多选框，分贝绑定单击响应函数
var items = document.getElementsByName("items");
for(i=0; i<items.length;i++){
//嵌套for循环，每点击一次按钮，就要进行四次判断
items[i].onclick = function(){
//设置全选框的状态默认为true，如果一直没有进入下面的判断，则证明四个选项都被选中了
allCheckBox.checked = true;
for(j=0;j<items.length;j++){
//判断四个多选框是否被全部选中
//只要有一个没有背选中，就代表四个多选框没有背全选
//只要进入下面的判断，就证明不是全选,将allCheckBox设置为flase状态
if(!items[j].checked){
allCheckBox.checked = false;
//只要进入判断，就能直接得到结果为false,不用在对后面的数据进行重复判断了，可以跳出循环,提高代码执效率
break;
}
}
};
}
};
</script>
</head>
<body>
<form method="POST" action="">
<p>你喜欢什么样的运动？<input type="Checkbox" class="bt" id="allCheckBox" />全选/全不选</p>
<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="allCheckBtn" value="全 选"/>
<input type="button" id="noCheckBtn" value="全不选"/>
<input type="button" id="fanCheckBtn" value="反 选"/>
<input type="button" id="tjBtn" value="提 交"/>
</form>
</body>
</html>