2021-09-13

HTMLラジオボタンの値をJavaScriptで取得・設定する

JavaScriptでHTMLラジオボタンの値を取得する場合はvalueプロパティを使用します。 ラジオボタンの選択状態を取得・設定するにはcheckedプロパティを使用します。

ラジオボタンは通常グループで利用しますから、 id属性を設定するよりも、name属性を使って要素群を取得します。

ラジオボタンの値を取得する

次のサンプルコードでは、name属性が「age」のラジオボタンの値を取得しています。

<form>
	<label><input type="radio" name="age" value="10">10代</label>
	<label><input type="radio" name="age" value="20">20代</label>
	<label><input type="radio" name="age" value="30">30代</label>
</form>

let elems = document.getElementsByName("age");
let val = "";

for (let i = 0; i < elems.length; i++) {
	if (elems[i].checked){
		val = elems[i].value;
	}
} // end for i

console.log(val);

例えば、「20代」の項目を選択している場合の結果は次の通りです。

20

ラジオボタンの値を取得する場合は、 まずgetElementsByNameメソッドを利用して同じname属性の要素群を取得します。

次に要素群をループして、checkedプロパティがtrueの要素のvalueを取得します。

ラジオボタンの値を設定する

次のサンプルコードでは、name属性が「age」のラジオボタン群の中から、 value属性が「30」のラジオボタンを選択しています。 HTMLは先程と同じものを使用しています。

<form>
	<label><input type="radio" name="age" value="10">10代</label>
	<label><input type="radio" name="age" value="20">20代</label>
	<label><input type="radio" name="age" value="30">30代</label>
</form>

let val = 30;

let elems = document.getElementsByName("age");

for (let i = 0; i < elems.length; i++) {
	if (elems[i].value == val){
		elems[i].checked = true;
	}
} 

まずgetElementsByNameメソッドでname属性「age」の要素群を取得します。

次に要素群をループして、value属性値が目的の値「30」と一致する、 ラジオボタンのcheckedプロパティをtrueにします。