实现全选联动，思路为点击全选框，下面的子选框全部被选中；子选框全部被选中时，全选框为选中状态；取消勾选其中一个子选框，全选框为未选中状态；
下面上代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 //样式 7 <style> 8 .box{ 9 width: 300px; 10 padding: 20px; 11 border: 1px solid #000; 12 border-radius: 5px; 13 margin: 20px auto; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="box" id="item"> 19 <input type="checkbox">全选 20 <div class="list"> 21 <input type="checkbox"> 22 <input type="checkbox"> 23 <input type="checkbox"> 24 </div> 25 </div> 26 //以下为js代码 27 <script> 28 function checkAll(id){ 29 var item=document.getElementById(id); 30 var checkAll=item.getElementsByTagName("input")[0]; 31 var list=item.getElementsByTagName("div")[0]; 32 var inputs=list.getElementsByTagName("input"); 33 //给一个计数器 34 var n=0; 35 checkAll.onclick=function(){ 36 /*点击全选，下边的全选*/ 37 if(checkAll.checked==true){ 38 for(var i=0;i<inputs.length;i++){ 39 inputs[i].checked=true; 40 } 41 n=3; 42 }else{ 43 for(var i=0;i<inputs.length;i++){ 44 inputs[i].checked=false; 45 } 46 n=0; 47 } 48 }; 49 50 for(var i=0;i<inputs.length;i++){ 51 //下面选框的监听事件 52 inputs[i].onclick=function(){ 53 if(this.checked==true){ 54 n++; 55 }else{ 56 n--; 57 } 58 //当下面得三个框都选中时 59 if(n==3){ 60 checkAll.checked=true; 61 }else{ 62 checkAll.checked=false; 63 } 64 } 65 } 66 } 67 //调用方法 68 checkAll("item"); 69 70 </script> 71 </body> 72 </html>
以下为效果图：
