<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>
</head>
<body>
<input type="checkbox">全选按钮
<br>
<input type="checkbox" class="check">
<br>
<input type="checkbox" class="check">
<br>
<input type="checkbox" class="check">
<button>反选</button>
<script>
var in1=document.getElementsByTagName("input")[0];
var inputs=document.getElementsByClassName("check")
var bt1=document.getElementsByTagName("button")[0];
bt1.onclick=function(){
for(var n=0;n<inputs.length;n++){
if(inputs[n].checked){
inputs[n].checked=false;
}else{
inputs[n].checked=true;
}
}
}
in1.onchange=function(){
// .checked 判断复选框是否被选中
// checked=ture 选中
// checked=false 未选中
console.log(this.checked);
if(this.checked==true){
for(var n=0;n<inputs.length;n++){
inputs[n].checked=true;
}
}else{
for(var n=0;n<inputs.length;n++){
inputs[n].checked=false;
}
}
}
for(var n=0;n<inputs.length;n++){
inputs[n].onchange=function(){
var sum=0;
for(var j=0;j<inputs.length;j++){
if(inputs[j].checked==true){
sum++
}
}
if(sum==inputs.length){
in1.checked=true;
}else{
in1.checked=false;
}
}
}
</script>
</body>
</html>
