HTML寫了checked=”false”還是勾選：分清屬性與目前狀態

模板輸出checked="false"，核取方塊卻還是打勾？在原生HTML裡，checked是布林屬性；寫進標籤就表示預設勾選，不會把字串false當成關閉指令。若要預設不勾選，應該省略整個checked屬性。

false不是checked的合法關閉值

先把下面兩個欄位放進一個空白頁，比較初始畫面。第一個是常見的錯誤輸出，第二個才是預設不勾選的寫法。

<!-- 錯誤示範：仍會預設勾選 -->
<label>
  <input type="checkbox" checked="false">
  接收更新通知
</label>

<!-- 預設不勾選：不輸出checked -->
<label>
  <input type="checkbox">
  接收更新通知
</label>

布林屬性可只寫名稱，例如checked；也可寫checked=””或checked=”checked”。字串true和false都不是合法取值。瀏覽器仍會因為屬性存在而把第一個方塊設為預設勾選，但不要把這種容錯行為當成正確格式。

模板應決定是否輸出整個屬性

檢查模板最後送到瀏覽器的HTML。當設定為關閉時，應得到沒有checked的input，而不是checked=”false”或checked=”0″。若資料來自資料庫或API，先依資料格式把它轉成真正的布林值，再決定是否輸出checked；別直接把字串塞進屬性。

這裡說的是原生HTML。框架的屬性綁定有自己的語法與轉換規則，不能把原始碼中的綁定表達式直接當成最後的HTML。先看瀏覽器裡實際產生的元素，再查該框架的綁定文件。

頁面載入後，讀checked目前狀態

如果要在JavaScript裡取消勾選，用元素的checked屬性，給它布林值false。以下HTML與後面的程式碼可接在一起測試；script放在表單後面，確保先取得元素。

<form id="demo">
  <label>
    <input id="notice" type="checkbox" checked>
    接收更新通知
  </label>
  <button type="reset">重設表單</button>
</form>

const notice = document.querySelector('#notice')

notice.checked = false

console.log(notice.checked)        // false：目前狀態
console.log(notice.defaultChecked) // true：預設狀態
console.log(notice.hasAttribute('checked')) // true

使用者手動取消勾選時，HTML上的checked也不一定消失。判斷「現在有沒有勾選」應讀notice.checked，不要用getAttribute(‘checked’)或屬性是否存在來代替。

重設後又勾選，先查預設狀態

在上面的表單按「重設表單」，方塊會回到預設勾選。notice.checked=false只改了當下狀態，沒有把HTML的預設值一起改掉。若需求是連重設後也維持預設不勾選，就要另外調整預設狀態；不要只在畫面上取消一次便以為完成。

還要分清checked與value。value是欄位勾選並提交時使用的值，不是打勾開關。一般表單中，未勾選的checkbox不會提交該欄位的名稱與值；後端若需要明確的關閉值，須按自己的資料格式處理，不能期待checked=”false”替你送出false。

參考資料