
<div>
全选:<input type="checkbox" />
<hr />
<input type="checkbox" />选项一<br />
<input type="checkbox" />选项二<br />
<input type="checkbox" />选项三<br />
<input type="checkbox" />选项四<br />
</div>
<script>
//1.获取元素
var allcheckbox = document.querySelector("input");
var items = document.querySelectorAll("input:nth-child(n+2)");
// console.log(allcheckbox);
// console.log(items);
//2.给全选按钮绑定单击事件
allcheckbox.onclick = function(){
//2-1.获取全选按钮的选中状态
var sta = allcheckbox.checked;
//checked的值为true,代表选中,值为false,代表未选中
// console.log(sta);
//2-2:把全选按钮的状态设置给每一个小选项
for(var i=0;i<items.length;i++){
items[i].checked = sta;
}
}
//3.给每一个选项绑定单击事件
for(var j=0;j<items.length;j++){
items[j].onclick = function(){
//3-1:设置一个标志,标志是否当前所有的按钮都被选中
var flag = true;
//3-2:循环判断是否有未被选中的选项,如果有,flag变为false
for(var n=0;n<items.length;n++){
if(items[n].checked == false){
flag = false;
break;
}
}
//3-3:根据flag的状态修改全选按钮的状态
allcheckbox.checked = flag;
}
}
</script>