效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta id="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
window.onload=function(){
//获取四个多选
var items=document.getElementsByName("items");
//获取全选/全不选 多选框
var checkedAllBox=document.getElementById("checkedAllBox");
//1.checkedAllBtn
var checkedAllBtn=document.getElementById("checkedAllBtn");
checkedAllBtn.onclick=function(){
for(var i=0;i<items.length;i++)
{
items[i].checked=true;
}
checkedAllBox.checked=true;
};
//2.checkedNoBtn
var checkedNoBtn=document.getElementById("checkedNoBtn");
checkedNoBtn.onclick=function(){
for(var i=0;i<items.length;i++)
{
items[i].checked=false;
}
checkedAllBox.checked=false;
};
//3.checkedRevBtn
var checkedRevBtn=document.getElementById("checkedRevBtn");
checkedRevBtn.onclick=function(){
///将checkedAllBox设置成选中状态
checkedAllBox.checked=true;
for(var i=0;i<items.length;i++)
{
items[i].checked =! items[i].checked;
//反选时也要判断四个多选框是否全部选中
if(!items[i].checked){
checkedAllBox.checked=false;
}
}
}
};
//4.sendBtn
var sendBtn=document.getElementById("sendBtn");
sendBtn.onclick=function(){
for(var i=0;i<items.length;i++)
{
if(items[i].checked)
alert("You have choose: "+items[i].value);
}
};
//5.checkedAllBox
checkedAllBox.onclick=function(){
for(var i=0;i<items.length;i++)
{
items[i].checked=checkedAllBox.checked;
}
};
//6.items
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
//将初始checkedAllBox设置为选中状态
//点击其中一个立即进入true状态，但再根据后面的循环判断是true还是false
checkedAllBox.checked=true;
for(var j=0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox.checked=false;
//一旦进入判断，则已经得出结果，不用再循环
}
}
};
}
};
</script>
</head>
<body>
<form method="POST">
<p>你爱好的运动是？</p>
<input type="checkbox" id="checkedAllBox">Select all / select none
<ul>
<li>
<input type="checkbox" id="pp" name="items" value="PingPong">PingPong
</li>
<li>
<input type="checkbox" id="fb" name="items" value="Football">Football
</li>
<li>
<input type="checkbox" id="bb" name="items" value="Basketball">Basketball
</li>
<li>
<input type="checkbox" id="bt" name="items" value="Baminton">Baminton
</li>
</ul>
<button type="button" id="checkedAllBtn">全选</button>
<button type="button" id="checkedNoBtn">全不选</button>
<button type="button" id="checkedRevBtn">反选</button>
<button type="submit" id="sendBtn">提交</button>
</form>
</body>
</html>没想到几个小小的键，触及的代码这么多，而且逻辑思维要比较强，时不时练一下这个代码，可以锻炼一下思维