1. <body>
    2.     <table>
    3.         <thead>
    4.             <tr>
    5.                 <th><input type="checkbox" id="qx"> 手机</th>
    6.             </tr>
    7.         </thead>
    8.         <tbody id="dx">
    9.             <tr>
    10.                 <td><input type="checkbox">苹果8</td>
    11.             </tr>
    12.             <tr>
    13.                 <td><input type="checkbox">苹果9</td>
    14.             </tr>
    15.             <tr>
    17.                 <td><input type="checkbox">苹果10</td>
    18.             </tr>
    19.         </tbody>
    20.     </table>
    21.     <script>
    22.         //获取事件 需要用到全选按钮和单选按钮
    23.         var qx = document.getElementById('qx');
    24.         var dx = document.getElementById('dx').querySelectorAll('input');
    25.         //注册事件 点击全选框 ,单选框全部勾起来
    26.         qx.onclick = function () {
    27.             for (i = 0; i < dx.length; i++) {
    28.                 dx[i].checked = this.checked;
    29.             }
    30.         }
    31.         //单选按钮
    32.         //遍历所有单项按钮加上判断
    33.         for (var i = 0; i < dx.length; i++) {
    34.             dx[i].onclick = function () {//点击任意单选按钮后
    35.                 var flag = true;//flag用于全选按钮值
    36.                 for (i = 0; i < dx.length; i++) {//遍历所有的单选按钮判断它处于是否全部处于选择状态
    37.                     if (!dx[i].checked) {//如果任意一个checked值不处于全选状态
    38.                         flag = false;//那么将假值赋给flag
    39.                         break;//只要flag变假值后,就没有循环的必要了
    40.                     }
    41.                 }
    42.                 qx.checked = flag;/* 遍历判断结束后,将值给qx按钮,如果上
    43.                 面判断有一个假值,那么全选按钮就取消全选. */
    44.             }
    45.         }
    46.     </script>
    47. </body>