先来看看效果

实现原理

• checked属性：true和false，前者为选中后者为没有选中
• 全选框状态和所有的复选框的父元素状态一致，所以结构上让全选框和所有的复选框的父元素同级
• 复选框只要有一个没有被选中全选框就不能被选中，for循环实现所有复选框点击事件以及所有复选框是否被选中的检查事件。

上代码

<!--  HTML结构-->
 <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="shopcar" />
          </th>
          <th>购物车</th>
        </tr>
      </thead>
      <tbody id="shopnames">
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>鞋袜</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>外套/棉服</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>裤子</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>T-shirt</td>
        </tr>
      </tbody>
    </table>
  </div>

 /* CSS样式 */
    * {
      padding: 0;
      margin: 0;
    }
    /* 设置面板属性 */
    .wrap {
      width: 500px;
      margin: 100px auto;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #413f3f;
      width: 500px;
    }
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th {
      background-color: #09c;
      font: bold 24px "微软雅黑";
      color: #fff;
    }
    td {
      font: 20px "微软雅黑";
    }
    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }

/*JS部分*/
    // 第一步，实现点击全选框，选中所有；再次点击全选框，所有不被选中
    /*获取全选卡*/
    var shopcar = document.getElementById("shopcar")
    /*获取所有复选卡*/
    var shopnames = document.querySelectorAll("#shopnames input")
    /*遍历所有的复选卡，让他们的状态和全选框一致----实现全选和取消全选效果*/
    shopcar.onclick = function () {
      for (var i = 0; i < shopnames.length; i++) {
        // this.checked当前复选框选中状态，如果选中则返回true，否则为false
        shopnames[i].checked = this.checked;
      }
    }
    // 第二步，复选框中只要有一个没被选中，全选框就要是未选中
    for (var j = 0; j < shopnames.length; j++) {
       //外层 for循环为每一个复选框添加点击事件
      shopnames[j].onclick = function () {
        // flag来表示全选框状态，默认为true
        var flag = true;
        // 点击一次复选框就检查一次所有的复选框是否都被选中
        for (var i = 0; i < shopnames.length; i++) {
          //非全选状态： 有一个复选框没有被选中，执行if语句
          if (!shopnames[i].checked) {
            flag = false;
          }
        }
        //全选状态：复选框全选中了就不执行上边if语句，直接拿来flag定义对的true值
        shopcar.checked = flag;
      }
    }