JavaScript 核取方塊 onChange

核取方塊的 change 事件會在選取狀態變更時觸發，讓你能據此執行回應。你可以從元素的 checked 屬性讀取目前的布林值。你可以透過 HTML 中的 onchange 屬性、指定元素的 onchange 屬性，或使用 addEventListener 註冊 change 事件監聽器來連接處理函式。

使用 change 事件處理核取方塊變更

使用者變更核取方塊的選取狀態時，change 事件就會觸發，不必等到元素失去焦點。事件會告訴程式狀態已經變更，而 checked 則會提供目前的狀態。針對同一個元素，請選用以下其中一種寫法，讓回應邏輯由單一明確的處理方式負責。

使用行內 onchange 處理函式

行內處理函式會在核取方塊的 HTML 中呼叫函式。在這個處理函式的執行環境中，this 代表核取方塊元素，因此函式可以直接讀取它的 checked 屬性。標籤可將描述文字與控制項關聯，而結果段落則提供顯示狀態的位置。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

<label>
  <input type="checkbox" onchange="showState(this)">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  function showState(checkbox) {
    document.getElementById("result").textContent = checkbox.checked;
  }
</script>

HTML 的 onchange 屬性會指定要呼叫的處理函式。textContent 會將布林值以純文字顯示。行內處理函式適合用於簡短範例，但它會將行為邏輯與標記混在一起；若專案希望將兩者分開管理，這種寫法可能就不太合適。

指定 onchange 屬性處理函式

若要將處理函式留在 JavaScript 中，請先為核取方塊設定 id，再選取該元素，並將函式指定給它的 onchange 屬性。函式若宣告了參數，收到的會是事件物件；如果函式直接讀取已選取的元素，就不需要參數。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

<label>
  <input type="checkbox" id="notifications">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  const checkbox = document.getElementById("notifications");
  const result = document.getElementById("result");

  checkbox.onchange = function () {
    result.textContent = checkbox.checked;
  };
</script>

指定此屬性就會設定元素的處理函式。如果稍後將另一個函式指定給相同屬性，新的函式會取代原本的函式。因此，若有多段彼此獨立的程式碼都需要回應事件，請改用事件監聽器。

使用 addEventListener 註冊 change 事件監聽器

addEventListener 會為指定的事件註冊回呼函式。這種寫法也會將事件物件傳入回呼函式作為參數；event.currentTarget 可用來取得註冊此監聽器的元素。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

<label>
  <input type="checkbox" id="notifications">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  const checkbox = document.getElementById("notifications");
  const result = document.getElementById("result");

  checkbox.addEventListener("change", function (event) {
    result.textContent = event.currentTarget.checked;
  });
</script>

新增事件監聽器時，不會取代其他地方註冊的處理函式。呼叫 addEventListener 時，第一個參數請使用事件名稱 change，不要使用 onchange。

讀取核取方塊的 checked 狀態

checked 屬性的值是布林值：核取方塊已選取時為 true，未選取時則為 false。請在處理函式中讀取它，以取得狀態變更後的值。在瀏覽器中，上方範例會將此值寫入結果區域；你也可以將該指派動作替換成介面需要的其他操作，例如啟用相關控制項。

這個精簡的 JavaScript 範例單獨呈現讀取狀態的邏輯。上方的瀏覽器範例則示範如何將這段邏輯連接到實際的核取方塊事件。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

function showState(checkbox) {
  return checkbox.checked;
}

const checkbox = { checked: true };
console.log(showState(checkbox));

true

此範例會印出從 checked 取得的布林值。這段 JavaScript 範例可以獨立執行；HTML 片段則是瀏覽器頁面的範例，並未以執行輸出的形式呈現。