基本代码:
<div>
你爱好的运动是?
<input type="checkbox" id="chosen"/>全选/全不选
<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/>
<br/>
</div>
目的:点击全选/全不选,items全部被选中或者全部不被选中,当不是全选中状态的时候,全选/全不选的checkbox也随之改变。
分析:
首先 通过第一次for循环给 items[i]都绑定鼠标单击响应函数,
然后再通过for循环去判断items是否被全部选中,如果不被全部选中 if(!items[j].checked),如果是,那么让chosen的状态为false,
到这一步会发现,当items被勾选掉一个,再去重复全部勾选状态时chosen并未被选中,是因为在第一次for循环开始时需要设置chosen.checked=true;
</script>
function myClick (idStr , fun){
var btn =document.getElementById(idStr);
btn.onclick =fun;
}
var items=document.getElementsByName("items");
var chosen=document.getElementById("chosen");
for(var i =0; i<items.length;i++){
items[i].onclick=function(){
chosen.checked=true;
for(var j =0;j<items.length;j++){
if(!items[j].checked){
chosen.checked = false;
break;
}
}
}
}
</script>
网友评论