jQuery操作Checkbox狀態的正確姿勢：prop與attr的區別及版本兼容性

版本演進與差異

屬性 vs 屬性值

• Attribute (HTML 屬性)：初始狀態，寫在標籤上 ``，`elem.getAttribute('checked')` 返回 `""` (空字符串) 或 `"checked"`。
• Property (DOM 屬性值)：實時狀態，`elem.checked` 返回 `true`/`false`，**決定瀏覽器渲染與表單提交**。

`.attr()` 操作 Attribute，`.prop()` 操作 Property。**用戶交互只改變 Property**，所以必須用 `.prop()` 同步狀態。

正確代碼模式

1. 設置勾選狀態

// ✅ 正確
$('input[name="items"]').prop('checked', true);   // 全選
$('input[name="items"]').prop('checked', false);  // 全不選

// ❌ 錯誤 (jQuery 1.9+ 完全無效)
$('input[name="items"]').attr('checked', 'checked');
$('input[name="items"]').attr('checked', true);
$('input[name="items"]').removeAttr('checked'); // 1.9+ 可用，但語義不清

2. 讀取勾選狀態

// ✅ 正確
var isChecked = $('#chk').prop('checked'); // true/false
var isChecked = $('#chk').is(':checked');  // 同義，鏈式調用友好

// ❌ 不推薦
var isChecked = $('#chk').attr('checked'); // 返回 "checked" 或 undefined，非布爾

3. 全選/反選/獲取值 完整範例

$('#checkAll').on('change', function() {
    // this 是原生 DOM，this.checked 是 property
    $('input[name="items"]').prop('checked', this.checked);
});

$('#getValues').on('click', function() {
    var vals = $('input[name="items"]:checked').map(function() {
        return this.value; // 原生 DOM value
    }).get(); // 轉為原生數組
    console.log(vals); // ["val1", "val3"]
});

常見避坑場景

總結

**`checked` 是 Property，不是 Attribute**。jQuery 1.6+ 引入 `.prop()` 正是為了解決這一語義混淆。**養成習慣：布爾屬性 (`checked`/`selected`/`disabled`/`readonly`/`hidden`) 全程用 `.prop()`**，代碼才在所有版本穩定、語義清晰、邏輯正確。