JavaScriptでラジオボタンの選択項目の取得や変更を検知する方法

JavaScriptでラジオボタンの選択項目の値を取得・検知する

Input要素のtype属性をradioに設定すると、ラジオボタンが表示されます。

JavaScriptで、現在選択中の値を参照するためにcheckedプロパティを利用します。

その上で、選択項目の内容をそのinput要素の valueプロパティを参照して取得します。

ページ読み込み後に、ラジオボタンの変更を検知するにはchangeイベントを利用します。

この変化の検知はform要素に対してchangeイベントを監視することで可能です。

プロパティー

プロパティー意味
フォーム要素[キー名]ラジオボタンの値文字列
ラジオボタンの仕様

イベント

イベント意味
changeform要素の変更時のイベント
changeイベントのform要素に対する仕様

サンプルコード

サンプルコードとして、異なる2つのラジオボタングループの選択肢を取得して選択肢のvalueプロパティの値を出力するコードを紹介します。

また選択肢の変化を検知し、反映するようにしています。

2つのラジオグループはname属性の値で紐付けられています。

Output
Radiobox1
Radiobox2
Pug
form#targetArea
		.form-group
			div Radiobox1
			.form-check
				input#targetRadio1-1.form-check-input(type="radio" name="targetRadio1" value="Radiobox 1-1" checked)
				label.form-check-label(for="targetRadio1-1") Radiobox 1-1
			.form-check
				input#targetRadio1-2.form-check-input(type="radio" name="targetRadio1" value="Radiobox 1-2")
				label.form-check-label(for="targetRadio1-2") Radiobox 1-2
			.form-check
				input#targetRadio1-3.form-check-input(type="radio" name="targetRadio1" value="Radiobox 1-3")
				label.form-check-label(for="targetRadio1-3") Radiobox 1-3
		.form-group
			div Radiobox2
			.form-check
				input#targetRadio2-1.form-check-input(type="radio" name="targetRadio2" value="Radiobox 2-1")
				label.form-check-label(for="targetRadio2-1") Radiobox 2-1
			.form-check
				input#targetRadio2-2.form-check-input(type="radio" name="targetRadio2" value="Radiobox 2-2" checked)
				label.form-check-label(for="targetRadio2-2") Radiobox 2-2
			.form-check
				input#targetRadio2-3.form-check-input(type="radio" name="targetRadio2" value="Radiobox 2-3")
				label.form-check-label(for="targetRadio2-3") Radiobox 2-3
	#formResult
JavaScript
const targetCheckbox = document.getElementById( 'targetArea' );

const targetResult = document.getElementById( 'formResult' );

//ページ読み込み時に1度処理
window.addEventListener('DOMContentLoaded', onChange );

//選択肢の変更を検知
targetCheckbox.addEventListener( 'change', onChange );

function onChange() {
	targetResult.textContent = `Radiobox1の選択肢は${targetCheckbox.targetRadio1.value}であり、Radiobox2の選択肢は${targetCheckbox.targetRadio2.value}です。`;
}
インストラクター