复选框与全选框的选中状态的联动

Posted 哈哈敲敲

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了复选框与全选框的选中状态的联动相关的知识,希望对你有一定的参考价值。

类似在网购时在购物车选择商品时的复选框与全选框的联动事件

对于原型,构造函数之类的还不熟,强行用了一波,结果写得又长又臭。

但总算功能还是做出来了,总要多实践才会变熟的。全部代码如下:

<!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>

 

以上是关于复选框与全选框的选中状态的联动的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现复选框的全选与全不选

vue基于element实现表格中点击某一行全选框选中此行所有选框

html 多选框 如何用js 控制全选 并且一键复制选中的多项值到剪贴板

js 判断 复选框全选全不选反选必选一个

vue中使用计算属性巧妙的实现多选框的“全选”

jQuery 全选与不全选 Jquery each