全选与反选的两种方式

时间:2022-03-07 04:04:38

第一种,是利用事件监听来完成

布局部分的代码:

<label>
全选 <input type="checkbox" id="all">
</label>
</div>
<div class="check">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
javascript部分的代码:
var allcheck = document.getElementById("all")
var aCheck = document.querySelectorAll(".check>input")
allcheck.addEventListener("click",function(){
for(var i=0;i<aCheck.length;i++){
       aCheck[i].checked=this.checked
     }
})
for(var i=0;i<aCheck.length;i++){
        aCheck[i].addEventListener("click",function(){
        var bstop=true;  //俗称开关门
             for(var j=0;j<aCheck.length;j++){
                        if(!aCheck[j].checked){
                                    bstop=false;
                                         break;
                           }
                  }
                            allcheck.checked=bstop
             })
}
第二种,利用数组的遍历来完成
var data=[
                 {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10,selected:false},
                 {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20,selected:false},
                 {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30,selected:false},
                 {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40,selected:false},
                 {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50,selected:false},
                 {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60,selected:false},
                 {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70,selected:false},
                 {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80,selected:false},
                 {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90,selected:false},
                 {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100,selected:false}
                 ];
//在页面上生成选框
        var str="<ul>";
         str+="<li><input type='checkbox' class='allCheck'></li>";
         data.forEach(function (t) {
                         str+="<li><input type='checkbox' class='checkbox'></li>";
           });
                         str+="</ul>";
            document.body.innerHTML+=str;

// 获取所有的input元素
     var inputs=document.getElementsByTagName("input");
    var checks=Array.from(inputs);
               checks.forEach(function (t) {
// t就是每个input
              t.addEventListener("click",clickHandler);
            });

               function clickHandler(e) {
// console.log(this);//this就是被点击的input
               var index=checks.indexOf(this);
// arr这个数组就是除了全选以外其他input的数组
                var arr=checks.slice(1);
                 if(index===0){
// 如果点击是第0个,也就是全选
                 var bool=this.checked;
                   arr.forEach(function (t) {
// 让每个不是全选input的元素都和全选这个input的checked相同
                    t.checked=bool;
                   })
                     }else{
                var bool1=arr.every(function (t) {
                          return t.checked;
                });
                   checks[0].checked=bool1;
           }
   }