<!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>
<script>
window.onload = function(){
function fun(check,func){
var btn =document.getElementById(check);
btn.onclick = func;
}
//全选
fun('checkedallbtn',function(){
var items = document.getElementsByName('items');
for(var a=0;a<items.length;a++){
items[a].checked=true;
};
var checkallbox = document.getElementById('checkallbox');
checkallbox.checked = true;
});
//全不选
fun('checkednobtn',function(){
var items = document.getElementsByName('items');
for(var a=0;a<items.length;a++){
items[a].checked = false;
};
var checkallbox = document.getElementById('checkallbox');
checkallbox.checked = false;
});
//反选 猜测if语句
fun('checkedboxrebtn',function(){
var items =document.getElementsByName('items'),checkallbox=document.getElementById('checkallbox');
for(var a=0;a<items.length;a++){
items[a].checked=!items[a].checked;
// 在判断一下
checkallbox.checked=true;
for(var i=0;i<items.length;i++){
if(!items[i].checked){checkallbox.checked=false;}
}
}
})
//提交 思路先获取value值
fun('sendbtn',function(){
var items = document.getElementsByName('items');
for(var a=0;a<items.length;a++){
if(items[a].checked){alert(items[a].value)}
}
});
//全选思路 还是if判断 先获取全选
/* var checkallbox = document.getElementById('checkallbox');
checkallbox.onclick=function(){
var items = document.getElementsByName('items');
for(var a=0;a<items.length;a++){
if(checkallbox.checked == true){
items[a].checked=true;
}else{items[a].checked=false}
}
} */
//复合框全选
fun('checkallbox',function() {
var items = document.getElementsByName('items');
for(var a=0;a<items.length;a++){
/* if(checkallbox.checked){
items[a].checked=true;
}else{items[a].checked=false} */
items[a].checked = checkallbox.checked;
}
});
// 最后一个大问题 四个选中主要的要更着联动
var items = document.getElementsByName('items'),checkallbox=document.getElementById('checkallbox');
for(var a=0;a<items.length;a++){
items[a].onclick=function(){
checkallbox.checked=true;
for(var i=0;i<items.length;i++){
if(!items[i].checked){checkallbox.checked=false;
break;
};
}
}
}
}
</script>
</head>
<body>
<form method="POST" action="">
你的爱好是？<input type="checkbox" id="checkallbox"/>全选/全不选
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<input type="button" id="checkedallbtn" value="全选">
<input type="button" id="checkednobtn" value="全不选">
<input type="button" id="checkedboxrebtn" value="反选">
<input type="button" id='sendbtn' value="提交">
</form>
</body>
</html>