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

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

コード

以下の4つのサンプルがあります。

No 説明
値を取得
10行目は、フォームのname「form1」とチェックボックスのname「color1」で対象を特定(50-52行目)しています。
11-14行目は、lengthプロパティでチェックボックスの数を取得してループを回しています。チェックボックスのチェックがついていた場合、12行目のif文のcheckedの判定がtrueになり、value値を取得します。
値を取得
20行目は、getElementsByNameメソッドでチェックボックスのname「color1」を特定(50-52行目)しています。
21-24行目は、lengthプロパティでチェックボックスの数を取得してループを回しています。チェックボックスのチェックがついていた場合、22行目のif文のcheckedの判定がtrueになり、value値を取得します。
値を設定 - 全ての項目にチェックを入れる(全選択)
31-34行目は、lengthプロパティでチェックボックスの数を取得してループを回しています。配列の各項目に対して、checkedにtrueを指定することによりチェックを入れています。
値を設定 - 全ての項目のチェックを外す
40-42行目は、lengthプロパティでチェックボックスの数を取得してループを回しています。配列の各項目に対して、checkedにfalseを指定することによりチェックを外しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>チェックボックスのサンプル</title>
<script>
// No.1 値を取得
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;
}
// No.2 getElementsByNameメソッドで値を取得
function btn2_click(){
	var str ="";
	var color1 = document.getElementsByName("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;
}
// No.3 全ての項目にチェックを入れる(全選択)
function btn3_click(){
	var str ="";
	var color1 = document.form1.color1;
	for (var i = 0; i < color1.length; i++){
			color1[i].checked = true;
			str = str + color1[i].value + " ";
	}
	document.getElementById("sp1").innerHTML = str;
}
// No.4 全ての項目のチェックを外す
function btn4_click(){
	var color1 = document.form1.color1;
	for (var i = 0; i < color1.length; i++){
			color1[i].checked = false;
	}
	document.getElementById("sp1").innerHTML = "";
}
</script>
</head>
<body >
<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 />
<input type="button" value="ボタン2" onclick="btn2_click()"/><br />
<input type="button" value="ボタン3" onclick="btn3_click()"/><br />
<input type="button" value="ボタン4" onclick="btn4_click()"/><br />
</form>
</body>
</html>

サンプル

上記コードのサンプルです。 
ボタン1を押すと、チェックボックスの現在選択されているvalue値を取得して表示します。
ボタン2を押すと、チェックボックスの現在選択されているvalue値を取得して表示します。対象の指定にgetElementsByNameを使用しています。
ボタン3を押すと、全ての項目にチェックを入ります。
ボタン4を押すと、全ての項目のチェックが外れます。

選択した色





関連の記事

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




△上に戻る