<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选、反选</title>
</head>
<body>
<form>
<input type="checkbox" name="" id="all" onclick="selectAll();" />全选<br />
<hr /><br />
<input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单一<br /><br />
<input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单二<br /><br />
<input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单三<br /><br />
<input class="chk" type="checkbox" name="chk" onclick="selectSingle();" />菜单四<br /><br />
</form>
<script type="text/javascript" >
var dom=document.getElementById('all');
var doms=document.getElementsByName('chk');
function selectAll(){
var len = doms.length;
for(var i=0;i<len;i++){
if(dom.checked){
doms[i].checked=true;
}else{
doms[i].checked=false;
};
}
};
function selectSingle(){
let len = 0;
let count = doms.length;
for(var i=0;i<count;i++){
if(doms[i].checked==true){
len++;
}
}
if (count == len) {
dom.checked = true;
}else{
dom.checked = false;
}
}
</script>
</body>
</html>