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

布局部分的代码：

<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;            }    }