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

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

確認環境
・Google Chrome/IE11

目次

checkboxが複数 value値を取得する(formとnameを使用)
  value値を取得する(getElementsByNameメソッドを使用)
  チェックを入れる(全選択)
  チェックを外す(全解除)
checkboxが1つ チェックされたか真偽値で確認する(formとnameを使用)
  チェックされたか真偽値で確認する(getElementsByIdを使用)
  チェックを入れる
  チェックを外す
イベントハンドラ チェックされたらvalue値を取得する(onchangeを使用)

value値を取得する(formとnameを使用)

ボタンを押した時、チェックされた項目のvalue値を取得して表示します。

選択した色

黄 

コード

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

<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="ボタン" 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)を配列にセットしています。

value値を取得する(getElementsByNameメソッドを使用)

ボタンを押した時、チェックされた項目の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="ボタン" 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="ボタン" 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="ボタン" 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にしてチェックを外しています。

チェックされたか真偽値で確認する(formとnameを使用)

ボタンを押した時、チェックされていた場合はtrue、チェックがない場合はfalseを表示します。

選択した色

赤 

コード

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

<p>選択した色 <span id="span5"></span></p>
<form name="form5">
	<input type="checkbox" name="color5" value="red" checked> 赤
</form>
<input type="button" value="ボタン" onclick="clickBtn5()"/>

<script>
function clickBtn5(){
	const color5 = document.form5.color5;

	if(color5.checked){ //(color5[i].checked === true)と同じ
		document.getElementById("span5").textContent = "trueです";
	}else{
		document.getElementById("span5").textContent = "falseです";
	}
}
</script>

3行目は、チェックボックスです。
11行目は、チェックの状態を真偽値で判定します。チェックされていればtrue、チェックされていない場合はfalseを返します。

チェックされたか真偽値で確認する(getElementsByIdを使用)

ボタンを押した時、チェックされていた場合はtrue、チェックがない場合はfalseを表示します。

選択した色

赤 

コード

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

<p>選択した色 <span id="span9"></span></p>
<input type="checkbox" id ="c9" value="red" checked> 赤
<input type="button" value="ボタン" onclick="clickBtn9()"/>

<script>
function clickBtn9(){
	const c9 = document.getElementById("c9");

	if(c9.checked){ //(c9.checked === true)と同じ
		document.getElementById("span9").textContent = "trueです";
	}else{
		document.getElementById("span9").textContent = "falseです";
	}
}
</script>

2行目は、チェックボックスです。
7行目は、getElementByIdメソッドでチェックボックスを取得しています。
9行目は、チェックボックスのチェックがついていた場合、if文のcheckedの判定がtrueになります。

チェックを入れる

チェックされていない状態で、ボタンを押すとチェックを入れます。

赤 

コード

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

<form name="form6">
	<input type="checkbox" name="color6" value="red" > 赤
</form>
<input type="button" value="ボタン" onclick="clickBtn6()"/>

<script>
function clickBtn6(){
	const color6 = document.form6.color6;

	color6.checked = true;
}
</script>

2行目は、チェックボックスです。
10行目は、取得した値の属性にtrueを指定しチェックを入れています。

チェックを外す

チェックされた状態で、ボタンを押すとチェックを外します。

赤 

コード

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

<form name="form7">
	<input type="checkbox" name="color7" value="red" checked> 赤
</form>
<input type="button" value="ボタン" onclick="clickBtn7()"/>

<script>
function clickBtn7(){
	const color7 = document.form7.color7;

	color7.checked = false;
}
</script>

2行目は、チェックボックスです。
10行目は、取得した値の属性にfalseを指定しチェックを外しています。

チェックされたらvalue値を取得する(onchangeを使用)

チェックされたらvalue値を取得して表示します。

選択した色

赤 

コード

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

<p>選択した色 <span id="span8"></span></p>
<form name="form8">
<input type="checkbox" name="c8" value="red" onchange="chk1(this.value)"> 赤
<input type="checkbox" name="c8" value="blue" onchange="chk1(this.value)"> 青
</form>

<script>
function chk1(val){

	document.getElementById("span8").textContent = val;

	if(val=== "red"){
		document.form8.c8[1].checked = false;
	}else{
		document.form8.c8[0].checked = false;
	}
}
</script>

3,4行目は、チェックボックスです。
チェックを入れるとonchangeのイベントハンドラで8行目の関数を実行します。
3行目のthis.valueは、redを指します。8行目に引数として渡します。
4行目のthis.valueは、blueを指します。8行目に引数として渡します。
10行目は、取得したvalue値を画面に表示します。
12~16行目は、チェックしていない方のチェックを外しています。

関連の記事

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

△上に戻る