案例要求：實現表單全選框與複選框的關聯。

即①點選thead全選框，關聯到tbody中的複選框（都被選中/不選中）；②手動選擇tbody中所有複選框，關聯到thead的全選框。

html部分：

寫一個4行*3列的表格。

<form action="">
        <table>
            <thead>
                <td><label for="tb_checkall"><input type="checkbox" id="tb_checkall">全選</label></td>
                <td>單價</td>
                <td>價格</td>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox">蘋果</td>
                    <td>5</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td><input type="checkbox">橘子</td>
                    <td>6</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td><input type="checkbox">香蕉</td>
                    <td>3</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </form>
 

css部分：

為表格設定樣式。

<style>
        table {
            margin: 100px auto;
            text-align: center;
            width: 300px;
            height: 210px;
            border-collapse: collapse;
        }
        table thead {
            height: 60px;
            background-color: lightblue;
        }
        table tbody tr{
            border-bottom: 1px solid #999;
        }
</style>
 

js部分：

第一步：完成要求①，點選全選框關聯到tbody中的所有複選框；

  var tb_checkall = document.querySelector('thead').querySelector('input');
  var cbs = document.querySelector('tbody').querySelectorAll('input');
  // 找到事件源：全選框（是一個input標籤）；tbody中的複選框們（定義一個變數，使用querySelectorAll返回一個偽陣列）。
  tb_checkall.onclick = function(){
  // 事件型別是onclick：每次點選全選框時觸發事件。
    for(var i = 0;i < cbs.length;i++){
    // 每次點選全選框時，使用for迴圈遍歷tbody中的複選框們，讓他們與全選框的選中狀態保持一致，達到關聯的效果。
      cbs[i].checked = this.checked;
      // this指向事件的呼叫者，即tb_checkall；this.checked屬性即全選框的選中狀態，將該狀態的true/false賦值給各位tbody中的複選框們，達成關聯。
    }
  }
 

第二步：完成要求②，手動點選tbody的複選框時，全選框被關聯。（即若tbody的複選框們都被選中，則全選框變為選中狀態；有一個沒選中，全選框都是未選中狀態。）

 for(var i = 0;i < cbs.length;i++){
 // 使用for迴圈，給每個複選框都繫結事件。
     cbs[i].onclick = function(){
     // 事件型別為onclick：點選每個複選框，觸發事件。
         var flag = true;      
         // 變數flag代表全選框的checked屬性值
         for(var i = 0;i < cbs.length;i++){
         // 觸發事件為：遍歷每個複選框，檢查是否有未被選中的，若有，則使全選框為未選中狀態。
             if(!cbs[i].checked){
             // 意在說明若有複選框確實未被選中，則執行下面的語句；
                 flag = false;
                 // 若有未被選中的複選框，則全選框的checked屬性為false。
                 break;
                 // 新增break只要有一個複選框未被選中，就退出for迴圈，提高了程式的執行效率。
             }
         }
         tb_checkall.checked = flag;
         // 如果有未被選中的複選框，則flag的值為false,全選框就未被選中。
         // 如果複選框都被選中了，不執行if中的語句，全選框的checked屬性為true。
     }
  }

============================================= 　 這是分割線 　=============================================
筆者為js初學者，若有錯誤，歡迎批評指正。