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

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

確認環境
・Windows10
・Google Chrome/IE11

フォームとnameでvalue値を取得する
getElementsByNameメソッドでvalue値を取得する
ラジオボタンのチェックを外す

フォームとnameでvalue値を取得する

ボタンを押すと、チェックされた項目のvalue値を取得するサンプルです。
フォーム(form)とラジオボタンのnameを使用します。

選択した色

コード

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

<p>選択した色 <span id="span1"></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" > 黄
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()"/>

<script>
function clickBtn1(){
	let str = "";
	const color1 = document.form1.color1;

	for (let i = 0; i < color1.length; i++){
		if(color1[i].checked){ //(color1[i].checked === true)と同じ
			str = color1[i].value;
			break;
		}
	}
	document.getElementById("span1").textContent = str;
}
</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)を変数にセットしています。

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

ボタンを押すと、チェックされた項目のvalue値を取得するサンプルです。
getElementsByNameメソッドを使用します。
フォーム(form)がなくても取得できます。

選択した色

赤青黄

コード

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

<p>選択した色 <span id="span2"></span></p>
<input type="radio" name="color2" value="red" checked> 赤
<input type="radio" name="color2" value="blue" > 青
<input type="radio" name="color2" value="yellow" > 黄
<input type="button" value="ボタン2" onclick="clickBtn2()"/>

<script>
function clickBtn2(){
	let str = "";
	const color2 = document.getElementsByName("color2");

	for (let i = 0; i < color2.length; i++){
		if(color2[i].checked){ //(color2[i].checked === true)と同じ
			str = color2[i].value;
			break;
		}
	}
	document.getElementById("span2").textContent = str;
}
</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="radio" name="color3" value="red" checked> 赤
	<input type="radio" name="color3" value="blue" > 青
	<input type="radio" name="color3" value="yellow" > 黄
</form>
<input type="button" value="ボタン3" onclick="clickBtn3()"/>

<script>
function clickBtn3(){
	const color3 = document.form3.color3;

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

2-4行目は、ラジオボタンです。
10行目は、フォームのname「form3」とラジオボタンのname「color3」で対象を特定(2-4行目)しています。
12行目は、ラジオボタンの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
13行目は、各項目に対してcheckedをfalseにしてチェックを外しています。