jQuery 操作 Checkbox 完整指南：全選、反選、取值

實務開發中常需對群組核取方塊進行全選、反選、取得勾選值等操作。以下提供完整可執行的 HTML + jQuery 範例，涵蓋三大核心功能。

完整程式碼

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>jQuery Checkbox 操作示範</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <form id="che">
        <input type="checkbox" name="newsletter" value="1" />1<br/>
        <input type="checkbox" name="newsletter" value="2" />2<br/>
        <input type="checkbox" name="newsletter" value="3" />3<br/>
        <input type="checkbox" name="newsletter" value="4" />4<br/>
        <input type="checkbox" name="newsletter" value="5" />5<br/>
        <input type="checkbox" name="newsletter" value="6" />6<br/>
        <input type="checkbox" name="newsletter" value="7" />7<br/>
        <input type="checkbox" name="newsletter" value="8" />8<br/>
        <input type="checkbox" name="all" id="convert" />反選<br/>
        <input type="checkbox" name="all" id="sel_all" />全選<br/>
        <input type="checkbox" name="all" id="get_value" />取值<br/>
    </form>

    <script>
        $(function() {
            // 反選
            $("#convert").change(function() {
                $("input[name='newsletter']").each(function() {
                    this.checked = !this.checked;
                });
            });

            // 全選/取消全選
            $("#sel_all").change(function() {
                $("input[name='newsletter']").prop("checked", this.checked);
            });

            // 取得勾選值
            $("#get_value").change(function() {
                var vals = [];
                $("input[name='newsletter']:checked").each(function() {
                    vals.push(this.value);
                });
                alert(vals.join("\n"));
            });
        });
    </script>
</body>
</html>

關鍵點解析

• 反選：遍歷每個 checkbox，將 checked 屬性取反。使用原生 this.checked 效能優於 $(this).attr()。
• 全選：直接用 .prop("checked", bool) 批次設定，prop 是 jQuery 1.6+ 推薦處理布林屬性的方法。
• 取值：選擇器 :checked 過濾已勾選項，迴圈收集 value，最後 join 輸出。
• 事件綁定：使用 change 事件而非 click，確保鍵盤操作也能觸發。

現代化寫法建議

• 改用 <button type="button"> 觸發動作，避免 checkbox 自身狀態干擾。
• 若資料量大，考慮用 map() + get() 取代 each 迴圈。
• 搭配 data-* 屬性儲存額外資訊，而非塞進 value。