看效果图
注意其中可能出现的几个bug
1.点击全选单选框后也应该全选,取消选择其余四个也应该取消选择
2.点击全选多选框以后,正常情况下四个都选中,取消一个选中,多选框也应该取消选中
3.点击全选按钮以后,全选多选框也应该选中
4.点击全不选按钮以后,全选多选框也应该取消选择
5.点击全选按钮以后,点击全不选,多选框应该发生变化
2.上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post">
你爱好的运动是?<input type="checkbox" id="chkallbox" />全选/全不选
<br/>
<input type="checkbox" name="sports" value="散打"/>散打
<input type="checkbox" name="sports" value="泰拳" />泰拳
<input type="checkbox" name="sports" value="柔术" />柔术
<input type="checkbox" name="sports" value="摔跤" />摔跤
<br />
<input type="button" id="chkabtn" value="全选" />
<input type="button" id="chknbtn" value="全不选" />
<input type="button" id="chkcbtn" value="反选" />
<input type="button" id="subbtn" value="提交" />
</form>
<script type="text/javascript">
var chkabtn = document.getElementById("chkabtn");
var sports = document.getElementsByName("sports");
chkabtn.onclick = function(){
for(var i=0; i<sports.length;i++){
sports[i].checked = true;
}
chkalbtn.checked = true;
}
var chknbtn = document.getElementById("chknbtn");
chknbtn.onclick = function(){
Array.from(sports).forEach(e=>e.checked=false);
chkalbtn.checked = false;
}
function myClick(idstr, fun){
var btn = document.getElementById(idstr);
btn.onclick = fun;
}
myClick("chkcbtn",function(){
for(let x=0;x<sports.length;x++){
sports[x].checked=!sports[x].checked;
}
chkalbtn.checked = true;
for(let x=0;x<sports.length;x++){
if(!sports[x].checked){
chkalbtn.checked = false;
break;
}
}
});
myClick("subbtn",function(){
let arr = new Array();
Array.from(sports).forEach(x=>{
if(x.checked==true){
arr.push(x.value);
}
});
alert(arr);
});
var chkalbtn = document.getElementById("chkallbox");
myClick("chkallbox", function(){
for(let i=0;i<sports.length;i++){
sports[i].checked = this.checked;
}
});
for(let i=0;i<sports.length;i++){
sports[i].onclick = function(){
chkalbtn.checked = true;
console.log("dianwo");
for(let x=0;x<sports.length;x++){
if(!sports[x].checked){
chkalbtn.checked = false;
break;
}
}
}
}
</script>
</body>
</html>