结构部分:
<div id="container">
<p>你爱好的运动是?</p>
<input type="checkbox" name="aon" id="aon" value="全选/全不选">全选/全不选<br>
<input type="checkbox" name="hobby" id="football" value="足球">足球
<input type="checkbox" name="hobby" id="basketball" value="篮球">篮球
<input type="checkbox" name="hobby" id="badminton" value="羽毛球">羽毛球
<input type="checkbox" name="hobby" id="pingpong" value="乒乓球">乒乓球<br>
<button id="all">全选</button>
<button id="not">全不选</button>
<button id="reverse">反选</button>
<button id="sub">提交</button>
</div>
js部分:
// 全选
var all=document.getElementById("all");
var hobby=document.getElementsByName("hobby");
var aon=document.getElementById("aon");
all.onclick=function(){
for(var i=0;i<hobby.length;i++){
hobby[i].checked=true;
}
aon.checked=true;
}
// 全不选
var not=document.getElementById("not");
not.onclick=function(){
for(var i=0;i<hobby.length;i++){
hobby[i].checked=false;
}
aon.checked=false;
}
// 反选
var reverse=document.getElementById("reverse");
reverse.onclick=function(){
aon.checked=true;
for(var i=0;i<hobby.length;i++){
hobby[i].checked=!hobby[i].checked;
if(!hobby[i].checked){
aon.checked=false;
}
}
}
// 全选/全不选
aon.onclick=function(){
for(var i=0;i<hobby.length;i++){
hobby[i].checked=this.checked;
}
}
// 四个都选中的话全选/全不选也选中
for(var i=0;i<hobby.length;i++){
hobby[i].onclick=function(){
aon.checked=true;
for(var j=0;j<hobby.length;j++){
if(!hobby[j].checked){
aon.checked=false;
break;
}
}
}
}
// 提交
var sub=document.getElementById("sub");
sub.onclick=function(){
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked){
alert(hobby[i].value)
}
}
}