jQuery 實現 Checkbox 全選/反選功能：第二次全選失效的原因排查與修復

現象

首次點擊「全選」Checkbox 正常選中所有子項，再次點擊可取消；但第三次 (第二次全選) 點擊時子項不再選中，雖然單獨勾選子項後再點「全選」可取消。

常見原因

1. 事件綁定重複：代碼中 onchange="checkAll(name)" 且 JS 又用 $('#checkAll').change(...) 重複綁定，導致處理函數執行兩次，狀態抵消。
2. 選擇器範圍錯誤：$("#"+name).find('input[type=checkbox]') 中 name 為父容器 ID，但 HTML 結構中父容器可能不是直接父級，導致找不到子 Checkbox。
3. 屬性與屬性混淆：.attr('checked', true) 僅設置 HTML 屬性，不改變 DOM checked 屬性 (jQuery 1.6+ 建議用 .prop('checked', true))。

修復代碼模板

<!-- HTML -->
<table>
  <tr>
    <td>全選 <input type="checkbox" id="checkAll" /></td>
  </tr>
  <tr>
    <td id="container"><!-- 動態生成的子 checkbox --></td>
  </tr>
</table>

<script>
$(function(){
    // 動態生成子項 (示例)
    var items = ['A','B','C'];
    $.each(items, function(i, v){
        $('#container').append(' '+v+'
');
    });

    // 全選邏輯 - 僅綁定一次，用 .prop
    $('#checkAll').on('change', function(){
        var checked = $(this).prop('checked');
        $('#container input[name="sub"]').prop('checked', checked);
    });
});
</script>

關鍵點

• 統一使用 .prop('checked', ...) 設置/讀取勾選狀態。
• 確保事件僅綁定一次，避免 HTML onchange 與 JS 綁定共存。
• 子項選擇器精確匹配容器結構。