jQuery Checkbox 全選/全不選失效？attr vs prop 陷阱與正確寫法

使用 $(":checkbox").attr("checked", true) 實現全選，點擊「全不選」後再點「全選」失效。原因在於 jQuery 1.6+ 版本 attr 操作 HTML 屬性，prop 操作 DOM 屬性，checked 屬於 DOM 屬性 (property)，必須用 prop。

錯誤程式碼

$("#allcheck").click(function(){
    $("div :checkbox").attr("checked", true);   // ❌ attr 只設定 initial 屬性
});
$("#nocheck").click(function(){
    $("div :checkbox").attr("checked", false);
});

正確寫法：使用 prop

$("#allcheck").click(function(){
    $("div :checkbox").prop("checked", true);   // ✅ 設定 DOM property
});
$("#nocheck").click(function(){
    $("div :checkbox").prop("checked", false);
});

attr vs prop 核心差異

替代方案：原生迴圈 (兼容所有版本)

var checkboxes = $("div :checkbox");
$("#allcheck").click(function(){
    checkboxes.each(function(){ this.checked = true; });
});
$("#nocheck").click(function(){
    checkboxes.each(function(){ this.checked = false; });
});

直接操作 this.checked (原生 DOM property) 最穩健，無版本相容疑慮。

進階：取得選中值

var selected = $("div :checkbox:checked").map(function(){ return this.value; }).get();
// ["a", "c"] 等

版本提醒

• jQuery 1.6 前：attr 同時處理 attribute/property，有時能碰巧生效。
• jQuery 1.6+：嚴格分離，務必用 prop 處理 checked/selected/disabled。
• jQuery 3.0+：attr("checked") 返回 "checked" 字串或 undefined，不再返回布林值。

改用 .prop("checked", true/false) 或原生 this.checked，即可徹底解決全選/全不選失效問題。