2021-04-02

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

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

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

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

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

var 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

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

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

実行結果

false
true
false

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

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

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

for (var i = 0; i < elems.length; i++) {
  elems[i].checked = true;
}