Checkbox復選框實現全選和全不選功能

代碼直接放在HTML/CSS/Javascript在線代碼運行中頁面即可顯示，不理解的地方可以查看注釋或評論區交流

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>JS實現復選框全選和全不選</title>
            <script type="text/javascript">
                  window.onload = function() {
                        // 通過ID獲取到全選按鈕
                        var checkAll = document.getElementById("checkAll");
                        // 獲取到name屬性為"hobby"的所有按鈕
                        var hobby = document.getElementsByName("hobby");
                        // 點擊按鈕進行全選和全不選
                        checkAll.onclick = function() {
                              for (var i = 0; i < hobby.length; i++) {
                                    /* 根據全選按鈕屬性為true/false時
                                       同時將屬性值賦值給每一個"hobby"按鈕 */
                                    hobby[i].checked = checkAll.checked;
                                    }
                              }
                        /*當所有其他選項都被選中時，全選按鈕才是選中狀態*/
                        // 獲取name屬性為"hobby"按鈕的數量
                        var length = hobby.length;
                        // 頁面加載完成后此循環用來獲取每一個"hobby"按鈕
                        for (var i = 0; i < length; i++) {
                        // 當"hobby"按鈕觸發點擊時間時執行以下函數
                              hobby[i].onclick = function() {
                                    // 定義一個計數變量
                                    var count = 0;
                                    // 點擊事件觸發后執行此循環
                                    for (var i = 0; i < length; i++) {
                                          // 如果有一個"hobby"復選框被選中，count計數加一
                                          if (hobby[i].checked == true) {
                                                count++;
                                          }
                                    }
                                    /* 當"hobby"復選框被選中數量和"hobby"復選框總數量相同時，
                                    將返回的值true賦值給全選按鈕，反之亦然 */
                                    checkAll.checked = (count == length);
                              }
                        }
                  }
            </script>
      </head>
      <body>
            <input type="checkbox" name="hobby" id="smoke" />抽煙<br />
            <input type="checkbox" name="hobby" id="drink" />喝酒<br />
            <input type="checkbox" name="hobby" id="perm" />燙頭
            <hr />
            <input type="checkbox" name="checkAll" id="checkAll" />全選<br />
      </body>
</html>

運行結果：