JavaScript - ラジオボタンの選択状態を取得する checked

JavaScriptでラジオボタンが選択されているかどうかを取得する場合は、 checked プロパティを利用します。

checked プロパティは、選択時に true、非選択時に falseとなります。

ここでは、id属性、name属性、を利用してラジオボタンの選択状態を取得する 方法を説明します。

id属性を使って取得する(getElementById)

id属性を使って取得する場合のサンプルコードです。

HTML

<form>
	<label><input type="radio" id="rbutton" value="hello" />hello</label>
</form>

JavaScript

getElementById()メソッドを使います。

let elem = document.getElementById('rbutton');

if (elem.checked){
	// 選択時の処理
} else {
	// 非選択時の処理
}

name属性を使って取得する(getElementsByName)

name属性を使って取得する場合のサンプルコードです。

HTML

name属性が設定されている3つのラジオボタンを用意します。

<form name="form0">
	<label><input type="radio" name="car" value="toyota" checked/>toyota</label>
	<label><input type="radio" name="car" value="honda"/>honda</label>
	<label><input type="radio" name="car" value="suzuki"/>suzuki</label>
</form>

JavaScirpt

getElementsByName()メソッドを使い、name属性が一致するNodeListオブジェクトを取得します。

あとは、NodeListオブジェクトの数だけループしてchecked プロパティの値を取得します。

let nodes = document.getElementsByName('car');

for (let i = 0; i < nodes.length; i++){
	if (nodes[i].checked) {
		// 選択時の処理
	} else {
		// 非選択時の処理
	}
}

まとめ

・ラジオボタンの選択状態を取得するには、checked プロパティを使用します。

・checkecd プロパティは、選択時にtrue、非選択時にfalseとなります。

・id属性が設定されている場合は、getElementById()を使います。

・name属性が設定されている場合は、getElementsByName()を使います。