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 = color1[i].value;
	}

	document.getElementById("sp1").innerHTML = str;
}
</script>
<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 />
</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 = color2[i].value;
	}

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

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

サンプル

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

選択した色


ラジオボタンのチェックを外す

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

<script>
function btn3_click(){

	var color3 = document.form3.color3;

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

<form name="form3">
<input type="radio" name="color3" value="red" checked> 赤
<input type="radio" name="color3" value="blue" > 青
<input type="radio" name="color3" value="yellow" > 黄<br />
<input type="button" value="ボタン2" onclick="btn3_click()"/>
</form>

サンプル

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


 

関連の記事

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

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


△上に戻る