1. <!DOCTYPE html>
    2. <html>
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <title></title>
    7.     </head>
    9.     <body>
    11.         <input type="checkbox" id="all">全选<br>
    12.         <div>
    13.             <input type="checkbox" class="checkes"> 手机<br>
    14.             <input type="checkbox" class="checkes"> 电脑<br>
    15.             <input type="checkbox" class="checkes"> 平板<br>
    16.             <input type="checkbox" class="checkes"> MP4<br>
    17.         </div>
    19.         <script>
    20.             /*
    21.              * (1)全选与取消全选做法：让所有的复选框的checked属性(选中状态)跟随着全选按钮即可
    22.              * (2)下面复选框架需要全部选中，上面的全选才能选中做法：给下面所有的复选框绑定点击事件
    23.              *         每次点击，都要循环查看下面所有的复选框是否有没被选中的，只要有一个没被选中，声明                        全选就不选中
    24.              *         
    25.              */    
    27.             //全选与取消全选：
    28.             var all = document.querySelector("#all");
    29.             var checks=document.querySelectorAll(".checkes");
    31.             //this.checked它可以得到复选框的选中状态，如果是true，就是选中状态，如果是false，就是                未选中
    32.             all.onclick=function(){
    33.                 for(var i=0;i<checks.length;i++){
    34.                     checks[i].checked=this.checked;
    35.                 }
    36.             }
    38.             //下面复选框全部选中，全选框选中
    39.             for(var i=0;i<checks.length;i++){
    40.                 checks[i].onclick=function(){
    41.                     //flag控制全选按钮是否选中
    42.                     var flag=true;
    43.                     //每次点击下面的复选框，都要循环检查这四个复选框有没有全部被选中
    44.                     for(var j=0;j<checks.length;j++){
    45.                         if(!checks[j].checked){
    46.                             flag=false;
    47.                             break;//退出循环,这样可以提高执行效率,因为只要有一个没被选中，剩下的就无需进行                                            循环检查了
    48.                         }
    49.                     }
    50.                 all.checked=flag;
    51.                 }
    52.             }
    54.         </script>
    55.     </body>
    57. </html>