JavaScript チェックボックス onChange

チェックボックスの change イベントを使うと、チェック状態が変わったときに処理を実行できます。現在の状態は要素の checked プロパティから Boolean 値として読み取れます。ハンドラーを設定する方法には、HTML に onchange 属性を記述する方法、要素の onchange プロパティに関数を割り当てる方法、addEventListener で change リスナーを登録する方法があります。

change イベントでチェックボックスの変更を処理する

チェックボックスでは、ユーザーがチェック状態を変更すると change イベントが発生します。要素からフォーカスが外れるまで待つことはありません。イベントは状態が変わったことをコードに知らせ、checked は現在の状態を示します。処理の担当を明確にするため、同じ要素には次の方法から1つを選んで使いましょう。

インラインの 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 を使うと Boolean 値をプレーンテキストとして表示できます。小さな例ではインラインハンドラーが便利ですが、動作とマークアップが混在するため、プロジェクトで両者を分離している場合には適さないことがあります。

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 の第1引数には onchange ではなく、イベント名の change を指定します。

チェックボックスの checked 状態を読み取る

checked プロパティは Boolean 値です。チェックボックスが選択されていると true、選択されていないと false になります。変更後の状態を取得するには、ハンドラーの中でこのプロパティを読み取ります。ブラウザーの例では、その値を結果表示欄に書き込みます。関連するコントロールを有効にするなど、インターフェイスに必要な処理にその代入を置き換えてください。

この短い JavaScript の例では、状態を読み取る処理だけを示しています。上のブラウザー例では、その処理を実際のチェックボックスのイベントに結び付ける方法を説明しています。

このセクションのコードと表示されるラベルや出力は英語のままです。

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

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

true

この例は checked から返される Boolean 値を出力します。JavaScript の例は単独で動作する構成です。HTML の例はブラウザーページ用で、実行結果としては示していません。