JavaScript: チェックボックスの値を取得・設定する

JavaScriptでチェックボックスの値を取得・設定する方法を説明します。

チェックありの場合、checkedプロパティの値は「true」、
チェックなしの場合、checkedプロパティの値は「false]になります。

getElementById()でピンポイントで取得する場合と、 getElementsByName()で複数の値を取得する方法を説明します。

チェックボックスの値をgetElementById()で取得

getElementById()メソッドでチェックボックスの値を取得する場合の HTMLコードとJavaScriptコードは次の通りです。

checkedプロパティでチェックボックスの状態を取得できます。 戻り値は「true / falsse」なので、 if文の条件式にそのまま使うこともできます。

■ HMTL


<div>
  <label><input type="checkbox" id="check" name="check" checked/>
    チェックボックス
  </label>
</div>

■ JavaScript


let check = document.getElementById("check");

if (check.checked){
  // チェックあり の場合
} else {
  // チェックなし の場合
}

チェックボックスの値を設定

設定する場合はcheckedプロパティに「true / false」を代入します。 以下は「チェックなし」に設定するJavaScriptコードです。


let check = document.getElementById("check");

check.checked = false;

複数のチェックボックスの値をまとめて取得

先程は「id」属性を使ってgetElementById()で取得しました。 複数のチェックボックスがある場合は、 「name」属性を使ってgetElementsByName()メソッドで取得することもできます。

要素を配列として取得できますから、 配列の数だけループさせることでチェック状態を取得できます。

■ HMTL


<div>
  <label><input type="checkbox" name="check" />
    チェック1
  </label>
  <label><input type="checkbox" name="check" checked />
    チェック2
  </label>
  <label><input type="checkbox" name="check" />
    チェック3
  </label>
</div>

■ JavaScript


let elems = document.getElementsByName("check");

for (let i = 0; i < elems.length; i++) {
  console.log(elems[i].checked);
} // end for i

実行結果

false
true
false

チェックボックスの値を設定

チェックボックスに値を設定する場合のJavaScriptコードは次の通りです。 次のコードは、すべてのチェックボックスが「チェックあり」になります。


let elems = document.getElementsByName("check");

for (let i = 0; i < elems.length; i++) {
  elems[i].checked = true;
}
JavaScript入門