JavaScriptでチェックボックスがチェックされたらどうなる？

Webページ上でユーザーが何かを選択できるようにする場合、チェックボックスは欠かせない要素です。JavaScriptを使えば、チェックボックスの状態変化に応じて、動的な処理を追加できます。この記事では、JavaScriptでチェックボックスがチェックされたかどうかを判定する方法、そしてチェック状態に応じて処理を実行する方法を解説します。

チェックボックスの状態を取得する「checked」属性

JavaScriptでチェックボックスの状態を取得するには、checked属性を使用します。チェックボックスがチェックされている場合はtrue、チェックされていない場合はfalseを返します。

<input type="checkbox" id="myCheckbox">

上記のHTMLを持つチェックボックスの場合、JavaScriptで以下のように状態を取得できます。

const checkbox = document.getElementById('myCheckbox');
const isChecked = checkbox.checked; 

if (isChecked) {
  // チェックされている場合の処理
  console.log("チェックされています"); 
} else {
  // チェックされていない場合の処理
  console.log("チェックされていません");
}

イベント発生時の処理を追加する

チェックボックスの状態が変化した際に何か処理を実行したい場合は、「change」イベントを使用します。 changeイベントは、チェックボックスの状態が変更され、その変更が確定したタイミングで発生します。

const checkbox = document.getElementById('myCheckbox');

checkbox.addEventListener('change', function() {
  if (this.checked) {
    // チェックされた場合の処理
    console.log("チェックされました");
  } else {
    // チェックが外された場合の処理
    console.log("チェックが外されました");
  }
});

チェックボックスの状態と連動した処理の例

チェックボックスの状態に応じて、様々な処理を実装できます。ここでは、具体的な例をいくつか紹介します。

機能	説明
フォームの有効/無効化	特定のチェックボックスがチェックされた場合のみ、フォームの送信ボタンを有効化できます。
要素の表示/非表示	チェックボックスの状態に応じて、関連するコンテンツを表示したり非表示にしたりできます。
合計金額の計算	複数のチェックボックスで商品を選択し、チェックされた商品の合計金額を動的に計算できます。

参考資料

よくある質問

Q1: 複数のチェックボックスの状態を一括で取得するにはどうすれば良いですか？

A1: document.querySelectorAll('input[type="checkbox"]') を使用して、全てのチェックボックスを取得し、ループ処理で個別に状態を確認する必要があります。

Q2: チェックボックスの初期状態を設定するにはどうすれば良いですか？

A2: HTMLのchecked属性を使用します。<input type="checkbox" checked>のように記述すると、チェックされた状態で表示されます。

Q3: JavaScriptでチェックボックスの状態を動的に変更するにはどうすれば良いですか？

A3: checkbox.checked = true; のように、JavaScriptでchecked属性に直接値を設定することで、チェックボックスの状態を変更できます。

その他の参考記事:checkbox jquery 取得