<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选综合</title>
</head>
<body>
<!--功能描述
1.全选
当且仅当ckbx全都被选中时,全选框被选中
2.全不选
有一个ckbx被选中时,全不选框不被选中
3.全选/全不选
当且仅当ckbx全都被选中时,全选框被选中
-->
<input type="checkbox" name="all"/>全选
<input type="checkbox" name="all" checked="checked"/>全不选
<input type="checkbox" name="all"/>全选/全不选<br/>
<input type="checkbox" name="ckbx"/>语文<br/>
<input type="checkbox" name="ckbx"/>数学<br/>
<input type="checkbox" name="ckbx"/>英语<br/>
<input type="checkbox" name="ckbx"/>物理<br/>
<script>
"use strict";
//全选框
var allOn=document.getElementsByName("all")[0];
//全不选框
var allOff=document.getElementsByName("all")[1];
//全选/全不选框
var all=document.getElementsByName("all")[2];
//ckbx复选框
var items=document.getElementsByName("ckbx");
//给全选框绑定点击事件
allOn.onclick=function(){
//选中所有ckbx
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
//全选开启 全不选关闭 全选/全不选开启
this.checked=true;
allOff.checked=false;
all.checked=true;
}
//给全不选框绑定点击事件
allOff.onclick=function(){
//取消选中所有ckbx
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
//全选关闭 全不选开启 全选/全不选关闭
allOn.checked=false;
this.checked=true;
all.checked=false;
}
//给全选/全不选框绑定点击事件
all.onclick=function(){
var flag=this.checked;
for(var i=0;i<items.length;i++){
items[i].checked=flag;
}
if(flag){
allOn.checked=true;
allOff.checked=false;
}else{
allOn.checked=false;
allOff.checked=true;
}
}
//获取ckbx被选中的个数
for(var j=0;j<items.length;j++){
items[j].onclick=function(){
var n=0;//记录选中的个数
for(var k=0;k<items.length;k++){
//判断ckbx是否被选中
if(items[k].checked){
n++;
}
}
//ckbx全被选中时,全选框被选中
allOn.checked=items.length==n;
//ckbx只要有一个被选中时,全不选框不被选中
allOff.checked=n==0;
//ckbx全被选中时,全选框被选中
all.checked=items.length==n;
}
}
</script>
</body>
</html>
