复选框与全选框的选中状态的联动-CSDN博客

简化版：

//复选框  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>