JavaScript 動態設定 checked 屬性：Property vs Attribute 差異與 setAttribute 正確用法

現象

// 代碼
document.getElementById('rb').checked = true;
// 結果：介面勾選生效，但「檢查元素」/「原始碼」均無 checked 屬性

核心差異：Property (屬性) vs Attribute (特性)

為什麼預設操作 Property？

效能：直接修改記憶體布林值，無需解析/序列化 HTML 字串。checked、disabled、selected、value 等均為布林/值類 Property。

何時需要 Attribute？

• 需透過 outerHTML 序列化表單狀態。
• CSS 選取器依賴 input[checked] (極少見)。
• Server-Side Rendering 需同步初始狀態。

正確雙向同步寫法

function setChecked(element, isChecked) {
    // 1. 更新 Property (即時生效)
    element.checked = isChecked;
    
    // 2. 同步 Attribute (可選，視需求)
    if (isChecked) {
        element.setAttribute('checked', '');
    } else {
        element.removeAttribute('checked');
    }
}

// jQuery 寫法 (自動處理雙向)
$('#rb').prop('checked', true);  // Property (推薦)
$('#rb').attr('checked', 'checked'); // Attribute

jQuery prop() vs attr() 官方建議

「對於 checked、selected、disabled、readonly、value 等布林/值屬性，永遠使用 .prop()。」

來源：jQuery API 文件