【JavaScript】チェックボックスの状態を判定する方法

JavaScriptでチェックボックスの状態を判定する

WEBサイト制作やWEBアプリ構築において、チェックボックスの状態によって何らかの処理を使い分けたい場合があります。

JavaScriptでチェックボックスの状態を判定するには、チェックボックス要素のckeckedプロパティを使います。

チェックボックスがチェック済みの場合はcheckedプロパティがtrueに、未チェックの場合はfalseになります。

< HTML >

<!-- 未チェックのチェックボックス -->
<input type="checkbox" class="checkBox" value="未チェック">

<!-- チェック済みのチェックボックス -->
<input type="checkbox" class="checkBox_checked" value="チェック済み" checked>

< JavaScript >

// 未チェックのチェックボックスの状態を判定する
const checkBox = document.querySelector('.checkBox');
console.log(checkBox.checked); // false

// チェック済みのチェックボックスの状態を判定する
const checkBox_checked = document.querySelector('.checkBox_checked');
console.log(checkBox_checked.checked); // true

複数のチェックボックスの状態を判定する

複数のチェックボックスの状態を判定したい場合には、name属性で名前付けしてあげると管理が簡単になります。

< HTML >

<form name="form">
  <input type="checkbox" name="checkbox_group" value="選択肢1">
  <input type="checkbox" name="checkbox_group" value="選択肢2" checked>
  <input type="checkbox" name="checkbox_group" value="選択肢3" checked>
  <input type="checkbox" name="checkbox_group" value="選択肢4">
</form>

< JavaScript >

// 状態を判定したいチェックボックスのリストを取得する
// (document.{formのname属性}.{checkboxのname属性})
const checkBoxList = document.form.checkbox_group;

for(element of checkBoxList) {
  if(element.checked) {
    console.log(`${element.value}はチェック済みです。`);
  } else {
    console.log(`${element.value}は未チェックです。`);
  }
}
// 選択肢1は未チェックです。
// 選択肢2はチェック済みです。
// 選択肢3はチェック済みです。
// 選択肢4は未チェックです。

まとめ

JavaScriptでチェックボックスの状態を判定するには、チェックボックス要素のckeckedプロパティを使って判定を行いましょう。

複数のチェックボックスの状態を判定したい場合には、name属性を使って名前付けをすると便利です。