<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var choose={
btns:[],
box:[],
xuanze:function(){
this.box=document.querySelectorAll('input');
return this;
},
chooseAll:function(){
for(var i=0;i<this.box.length;i++){
this.box[i].checked=true;
}
},
//全选函数
chooseNo:function(){
for(var i=0;i<this.box.length;i++){
this.box[i].checked=false;
}
},
//不选函数
chooseOr:function(){
for(var i=0;i<this.box.length;i++){
if(this.box[i].checked){
this.box[i].checked=false;
}else{
this.box[i].checked=true;
}
}
}
//反选函数
}
//以下为调用函数
window.onload=function(){
var btn=document.querySelectorAll('button');
btn[0].onclick=function(){
choose.xuanze().chooseAll();
};
btn[1].onclick=function(){
choose.xuanze().chooseNo();
}
btn[2].onclick=function(){
choose.xuanze().chooseOr();
}
}
</script>
</head>
<body>
<button>全选</button>
<button>不选</button>
<button>反选</button><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
</body>
</html>