JavaScript `checkAll(this.checked)` 參數傳遞機制詳細解析

程式碼片段

逐字拆解

• this：當前觸發事件的 DOM 元素（該 checkbox）。
• .checked：checkbox 專屬屬性，布林值，true 表示勾選，false 表示未勾選。
• this.checked：取得當前勾選狀態，作為實參傳遞給 checkAll。
• checkAll(booleanValue)：函數形式參數 booleanValue 接收該布林值。

函數實作

function checkAll(booleanValue) {
    var checkboxes = document.getElementsByName("hobby");
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = booleanValue;  // 統一設定所有子選項
    }
}

執行流程圖解

用戶點擊「全選/全不選」checkbox
        │
        ▼
onclick 觸發 → 計算 this.checked (true/false)
        │
        ▼
呼叫 checkAll(true) 或 checkAll(false)
        │
        ▼
迴圈將所有 name="hobby" 的 checkbox.checked 設為同樣值

常見變體

• 按鈕觸發： 直接傳常值。
• 反選：checkboxes[i].checked = !checkboxes[i].checked;。
• jQuery 版：$('input[name="hobby"]').prop('checked', booleanValue);。

注意事項

• getElementsByName 回傳即時 NodeList，迴圈中長度不變，安全。
• 若動態新增 checkbox，需重新綁定或使用事件委派。
• 表單提交時，未勾選的 checkbox 不會發送任何值，後端需檢查參數是否存在而非值為何。