复选框与全选框的选中状态的联动
简化版：
//复选框 par 包含全选和复选框的最外围父元素，这个函数适合有多个全选和单选的模块的页面
function Check(par) {
this.all = par.querySelector('.all') //全选框的class为all
this.one = par.querySelectorAll('.one') //单个复选框的class为one
this.init()
}
Check.prototype = {
constructor: Check,
init: function () {
this.chooseAll()
this.chooseOne()
},
chooseAll: function () { //选择全部
var self = this
this.all.addEventListener(
'click',
function () {
if (this.checked) {
[].map.call(self.one, (function (item) {
item.checked = true
}))
} else {
[].map.call(self.one, (function (item) {
item.checked = false
}))
}
},
false
)
},
chooseOne:function(){ //选择单个
var self = this;
[].forEach.call(self.one,function(item){
item.addEventListener(
'click',
function(){
if(self.isAllChecked()){
self.all.checked = true
}else{
self.all.checked = false
}
},
false
)
})
},
isAllChecked:function(){ //检测是否全部选中
var self = this
var isChecked = false;
isChecked = [].every.call(self.one,function(item){return item.checked})
return isChecked
}
}
类似在网购时在购物车选择商品时的复选框与全选框的联动事件
对于原型，构造函数之类的还不熟，强行用了一波，结果写得又长又臭。
但总算功能还是做出来了，总要多实践才会变熟的。全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>checkbox</title>
<style>
.container{
width:30% ;
height: 200px;
border:1px solid #333;
margin:0 auto;
padding: 50px 0 0 50px;
}
.container .top{
margin:0 0 20px 0 ;
}
.container input{
outline: none;
}
.container .bottom{
margin:10px 0 0 0;
}
.bottom .submit{
outline: none;
border:0;
background: none;
border:1px solid #333;
width:50px;
height:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<input type="checkbox" class="check" checked="checked" name="1">1
<input type="checkbox" class="check" checked="checked" name="2">2
<input type="checkbox" class="check" checked="checked" name="3">3
</div>
<div class="main">
<input type="checkbox" class="all" checked="checked">全选
<input type="checkbox" class="reverse" >反选
</div>
<div class="bottom">
<button class="submit">结算</button><small>(只能点一次)</small>
</div>
</div>
<script>
//所有复选框默认为选中状态，因此全选的框也是默认为选中状态
function Check(){
this.inputList=document.querySelectorAll('.check');
this.all=document.querySelector('.all');
this.reverse=document.querySelector('.reverse');
this.submit=document.querySelector('.submit');
}
Check.prototype.init=function(){
this.choose()
this.chooseAll()
this.creverse()
this.csubmit()
}
/*点击单个复选框。
固定事件：当前框若是选中状态，就取消选中，若当前框为非选中状态，则相反
可能事件（主要是与全选框的联动）：
情况1：全选框处于选中状态(就是所有的框都是选中状态的情况下)，若是当前框取消选中的话，，则全选框也会取消选中
情况2：全选框处于非选中状态，而且除当前框的其它所有框都是选中状态的情况下，若是当前框被选中，那么全选也会自动变成选中状态
*/
Check.prototype.choose=function(){
var len=this.inputList.length,
list=this.inputList,
all=this.all,
self=this;
for(var i=0;i<len;i++){
list[i].addEventListener('click',function(){
if(this.getAttribute('checked')=='checked'){
this.setAttribute('checked','')
all.setAttribute('checked','')
all.checked=false
}else{
this.setAttribute('checked','checked')
if(self.isChecked()){
all.setAttribute('checked','checked')
all.checked=true
}
}
},false)
}
}
//检测全部复选框是否选中
Check.prototype.isChecked=function(){
return [].every.call(this.inputList,function(item,index){
if(item.getAttribute('checked')=='checked'){
return true
}else{
return false
}
})
}
//点击全选框的事件
Check.prototype.chooseAll=function(){
var all=this.all,
list=this.inputList;
all.addEventListener('change',function(){
if(all.getAttribute('checked')=='checked'){
all.setAttribute('checked','')
for(var i=0;i<list.length;i++){
list[i].checked=false
list[i].setAttribute('checked','')
}
}else{
for(var i=0;i<list.length;i++){
list[i].checked=true
list[i].setAttribute('checked','checked')
}
all.setAttribute('checked','checked')
}
},false)
}
//点击反选框的事件，本来是不打算加这个事件的，反正只是练习，多写点也无所谓啦
Check.prototype.creverse=function(){
var all=this.all,
list=this.inputList,
reverse=this.reverse,
self=this;
reverse.addEventListener('change',function(){
if(reverse.getAttribute('checked')=='checked'){
for(var i=0;i<list.length;i++){
if(list[i].getAttribute('checked')=='checked'){
list[i].setAttribute('checked','')
list[i].checked=false
}else{
list[i].checked=true
list[i].setAttribute('checked','checked')
}
}
if(self.isChecked()){
all.checked=true;
all.setAttribute('checked','checked')
}else{
all.checked=false;
all.setAttribute('checked','')
}
}else{
for(var i=0;i<list.length;i++){
if(list[i].getAttribute('checked')=='checked'){
list[i].setAttribute('checked','')
list[i].checked=false
}else{
list[i].checked=true
list[i].setAttribute('checked','checked')
}
}
if(self.isChecked()){
all.checked=true;
all.setAttribute('checked','checked')
}else{
all.checked=false;
all.setAttribute('checked','')
}
}
},false)
}
//点击结算的事件
Check.prototype.csubmit=function(){
var btn=this.submit,
list=this.inputList,
arr=[],
one=true;
btn.addEventListener('click',function(){
if(one){
[].forEach.call(list,function(item,index){
if(item.getAttribute('checked')=='checked'){
arr.push(item.getAttribute('name'))
}
})
one=false
alert(arr)
}
},false)
}
var check=new Check();
check.init()
</script>
</body>
</html>
