JavaScript ラジオボタンの値を取得/設定するサンプル

JavaScriptのラジオボタンの値を取得/設定するサンプルです。

コード

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

No 説明
値を取得
10行目は、フォームのname「form1」とラジオボタンのname「color1」で対象を特定(40-42行目)しています。
11-14行目は、lengthプロパティでラジオボタンの数を取得してループを回しています。
ラジオボタンのチェックがついていた場合、12行目のif文のcheckedの判定がtrueになり、value値を取得します。
値を取得
20行目は、getElementsByNameメソッドでラジオボタンのname「color1」を特定(40-42行目)しています。
21-24行目は、lengthプロパティでラジオボタンの数を取得してループを回しています。
ラジオボタンのチェックがついていた場合、22行目のif文のcheckedの判定がtrueになり、value値を取得します。
値を設定 - 全ての項目のチェックを外す
30-32行目は、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 = 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 = color1[i].value;
	}
	document.getElementById("sp1").innerHTML = str;
}
// No.3 全ての項目のチェックを外す
function btn3_click(){
	var color1 = document.form1.color1;
	for (var i = 0; i < color1.length; i++){
			str = color1[i].checked = false;
	}
	document.getElementById("sp1").innerHTML = "";
}
</script>
</head>
<body >
<p>選択した色 <span id="sp1"></span></p>
<form name="form1">
<input type="radio" name="color1" value="red" checked> 赤
<input type="radio" name="color1" value="blue" > 青
<input type="radio" 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()"/>
</form>
</body>
</html>

サンプル

上記コードのサンプルです。
ボタン1を押すと、ラジオボタンの現在選択されているvalue値を取得して表示します。
ボタン2を押すと、ラジオボタンの現在選択されているvalue値をgetElementsByNameメソッドを使用して表示します。
ボタン3を押すと、全ての項目のチェックが外れます。

選択した色




関連の記事

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




△上に戻る