全选，全不选，自动全选，自动全不选

该效果是JQ代码，所以在实现前，请自己手动引入JQ插件；
效果图

1.css代码

table {
   border-collapse: collapse;
}
th,
td {
    border: 1px solid red;
    padding: 10px;
    text-align: center;
}

2.html代码

<table>
    <tr>
       <th>
            <input type="checkbox" id="check_all" />
        </th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
     </tr>
     <tr>
         <td>
             <input type="checkbox" />
         </td>
         <td>张三</td>
         <td>男</td>
         <td>18</td>
     </tr>
    <tr>
         <td>
             <input type="checkbox" />
         </td>
         <td>赵四</td>
         <td>男</td>
         <td>19</td>
     </tr>
     <tr>
         <td>
             <input type="checkbox" />
         </td>
         <td>王五</td>
         <td>女</td>
         <td>17</td>
     </tr>
     <tr>
         <td>
             <input type="checkbox" />
         </td>
         <td>聂把</td>
         <td>男</td>
         <td>19</td>
     </tr>
 </table>

js代码

<script>
      $(function() {
          // 全选或者全不选
          $("#check_all").on("click", function() {
              var flag = $(this).prop("checked");
              $("td input[type='checkbox'").prop("checked", flag);
          });
          //当子元素手动全选时，全选按钮自动选择,如果子元素有一个时未选择装填，则全选按钮不选中
          $("td input[type='checkbox'").on("click", function() {
              var flag = $(this).prop("checked");
              $("td input[type='checkbox'").each(function(index, ele) {
               //遍历所有的复选框，如果有一个复选框时未选中状态，就结束循环，全选按钮不选中
                  if ($(ele).prop("checked")) {
                      flag = true;
                      $("#check_all").prop("checked", flag);
                  } else {
                      flag = false;
                      $("#check_all").prop("checked", flag);
                      return false;
                  }
              });
          });
      });
  </script>