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

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

目次

formの名称を指定して値を取得する

formの名称を指定して値を取得するサンプルです。
4行目は、フォームのname「form1」とチェックボックスのname「color1」で対象を特定(16-18行目)しています。
6行目は、lengthプロパティでチェックボックスの数を取得してループを回しています。
7行目は、チェックボックスのチェックがついていた場合、if文のcheckedの判定がtrueになります。
8行目は、チェックボックスのvalue値(red,blue,yellow)を変数にセットしています。

<script>
function btn1_click(){
	var str = "";
	var color1 = document.form1.color1;

	for (var i = 0; i < color1.length; i++){
		if(color1[i].checked) //(color1[i].checked === true)と同じ
			str = str + color1[i].value + " ";
	}

	document.getElementById("sp1").innerHTML = str;
}
</script>
<p>選択した色 <span id="sp1"></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" > 黄<br />
<input type="button" value="ボタン1" onclick="btn1_click()"/><br />
</form>

サンプル

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

選択した色


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

getElementsByNameメソッドで値を取得するサンプルです。
4行目は、getElementsByNameメソッドでチェックボックスのname「color2」を特定(16-18行目)しています。
6行目は、lengthプロパティでチェックボックスの数を取得してループを回しています。
7行目は、チェックボックスのチェックがついていた場合、if文のcheckedの判定がtrueになります。
8行目は、チェックボックスのvalue値(red,blue,yellow)を変数にセットしています。

<script>
function btn2_click(){
	var str ="";
	var color2 = document.getElementsByName("color2");

	for (var i = 0; i < color2.length; i++){
		if(color2[i].checked) //(color2[i].checked === true)と同じ
			str = str + color2[i].value + " ";
	}

	document.getElementById("sp2").innerHTML = str;
}
</script>
<p>選択した色 <span id="sp2"></span></p>

<input type="checkbox" name="color2" value="red" checked> 赤
<input type="checkbox" name="color2" value="blue" > 青
<input type="checkbox" name="color2" value="yellow" > 黄<br />
<input type="button" value="ボタン2" onclick="btn2_click()"/><br />

サンプル

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

選択した色


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

全ての項目にチェックを入れる(全選択)サンプルです。
4行目は、フォームのname「form3」とチェックボックスのname「color3」で対象を特定(12-14行目)しています。
6行目は、lengthプロパティでチェックボックスの数を取得してループを回しています。
7行目は、配列の各項目に対して、checkedにtrueを指定することによりチェックを入れています。

<script>
function btn3_click(){

	var color3 = document.form3.color3;

	for (var i = 0; i < color3.length; i++){
			color3[i].checked = true;
	}
}
</script>
<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" > 黄<br />
<input type="button" value="ボタン2" onclick="btn3_click()"/>
</form>

サンプル

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


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

全ての項目のチェックを外すサンプルです。
4行目は、フォームのname「form4」とチェックボックスのname「color4」で対象を特定(12-14行目)しています。
6行目は、lengthプロパティでチェックボックスの数を取得してループを回しています。
7行目は、配列の各項目に対して、checkedにfalseを指定することによりチェックを外しています。

<script>
function btn4_click(){

	var color4 = document.form4.color4;

	for (var i = 0; i < color4.length; i++){
			color4[i].checked = false;
	}
}
</script>
<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 />
<input type="button" value="ボタン4" onclick="btn4_click()"/>
</form>

サンプル

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


関連の記事

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

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る