JavaScript チェックボックスの値を取得/設定するサンプル

JavaScriptのチェックボックスの値を取得/設定するサンプルです。

確認環境
・Windows10
・Google Chrome/IE11

目次

フォームとnameでvalue値を取得する

ボタンを押すと、チェックされた項目のvalue値を取得するサンプルです。
フォーム(form)とチェックボックスのnameを使用します。

選択した色

コード

上記サンプルのコードです。

<p>選択した色 <span id="span1"></span></p>
<form name="form1">
	<input type="checkbox" name="color1" value="red" checked> 赤
	<input type="checkbox" name="color1" value="blue" > 青
	<input type="checkbox" name="color1" value="yellow" > 黄
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()"/>

<script>
function clickBtn1(){
	const arr1 = [];
	const color1 = document.form1.color1;

	for (let i = 0; i < color1.length; i++){
		if(color1[i].checked){ //(color1[i].checked === true)と同じ
			arr1.push(color1[i].value);
		}
	}
	document.getElementById("span1").textContent = arr1;
}
</script>

3-5行目は、チェックボックスです。
12行目は、フォームのname「form1」とチェックボックスのname「color1」で対象を特定(3-5行目)しています。
14行目は、チェックボックスの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
15行目は、チェックボックスのチェックがついていた場合、if文のcheckedの判定がtrueになります。
16行目は、チェックボックスのvalue値(red,blue,yellow)を配列にセットしています。

 

getElementsByNameメソッドでvalue値を取得する

ボタンを押すと、チェックされた項目のvalue値を取得するサンプルです。
getElementsByNameメソッドを使用します。
フォーム(form)がなくても取得できます。

選択した色

コード

上記サンプルのコードです。

<p>選択した色 <span id="span2"></span></p>
<input type="checkbox" name="color2" value="red" checked> 赤
<input type="checkbox" name="color2" value="blue" > 青
<input type="checkbox" name="color2" value="yellow" > 黄
<input type="button" value="ボタン2" onclick="clickBtn2()"/>

<script>
function clickBtn2(){
	const arr2 = [];
	const color2 = document.getElementsByName("color2");

	for (let i = 0; i < color2.length; i++){
		if(color2[i].checked){ //(color2[i].checked === true)と同じ
			arr2.push(color2[i].value);
		}
	}
	document.getElementById("span2").textContent = arr2;
}
</script>

2-4行目は、チェックボックスです。
10行目は、getElementsByNameメソッドでチェックボックスのname「color2」を特定(2-4行目)しています。
12行目は、チェックボックスの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
13行目は、チェックボックスのチェックがついていた場合、if文のcheckedの判定がtrueになります。
14行目は、チェックボックスのvalue値(red,blue,yellow)を配列にセットしています。

 

全ての項目にチェックを入れる(全選択)

全ての項目にチェックを入れるサンプルです。
ボタンを押すとチェックが全選択になります。

コード

上記サンプルのコードです。

<form name="form3">
	<input type="checkbox" name="color3" value="red" checked> 赤
	<input type="checkbox" name="color3" value="blue" > 青
	<input type="checkbox" name="color3" value="yellow" > 黄
</form>
<input type="button" value="ボタン3" onclick="clickBtn3()"/>

<script>
function clickBtn3(){
	const color3 = document.form3.color3;

	for (let i = 0; i < color3.length; i++){
		color3[i].checked = true;
	}
}
</script>

2-4行目は、チェックボックスです。
10行目は、フォームのname「form3」とチェックボックスのname「color3」で対象を特定(2-4行目)しています。
12行目は、チェックボックスの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
13行目は、各項目に対してcheckedをtrueにしてチェックを入れています。

 

全ての項目のチェックを外す

全ての項目のチェックを外すサンプルです。
ボタンを押すと全てのチェックが外れます。

コード

上記サンプルのコードです。

<form name="form4">
	<input type="checkbox" name="color4" value="red" checked> 赤
	<input type="checkbox" name="color4" value="blue" > 青
	<input type="checkbox" name="color4" value="yellow" > 黄<br />
</form>
<input type="button" value="ボタン4" onclick="clickBtn4()"/>

<script>
function clickBtn4(){
	const color4 = document.form4.color4;

	for (let i = 0; i < color4.length; i++){
		color4[i].checked = false;
	}
}
</script>

2-4行目は、チェックボックスです。
10行目は、フォームのname「form4」とチェックボックスのname「color4」で対象を特定(2-4行目)しています。
12行目は、チェックボックスの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
13行目は、各項目に対してcheckedをfalseにしてチェックを外しています。

関連の記事

JavaScript ラジオボタンの値を取得/設定するサンプル
JavaScript セレクトボックスの値を取得/設定するサンプル
JavaScript hiddenの値を取得/設定するサンプル
JavaScript テキストボックスの値を取得/設定するサンプル
JavaScript テキストエリアの値を取得/設定するサンプル
jQuery チェックボックスの選択されている値を取得する
JavaScript for...in文とfor...of文のサンプル

△上に戻る