JavaScript - ラジオボタンの切り替えイベント

JavaScriptでラジオボタンの切り替えイベントイベントを実装する簡単なコード例を紹介しています。

HTMLには、値の切り替えを検出する対象としたラジオボタンタグにクラス名「radio-btn」を指定して処理しています。

<div class="item-container">
	<p id="output">checked : A</p>
	<div class="radio-btns">
		<p><input type="radio" name="type" class="radio-btn" value="A" checked>A</p>
		<p><input type="radio" name="type" class="radio-btn" value="B">B</p>
		<p><input type="radio" name="type" class="radio-btn" value="C">C</p>
	</div>
</div>

対象とするラジオボタン要素をquerySelectorAll()で全指定、各ボタン要素毎にaddEventListener()で「change」を指定して、値がが切り替えられた事を検出するイベントを実装しています。

コード例では各ラジオボタンの切り替えイベント時に切り替えられた値を出力エリアに表示しています。

// 対象のラジオボタンをすべて取得する
let radio_btns = document.querySelectorAll('.radio-btn');

// 繰り返し処理にて各ラジオボタンに切り替えイベントを作成する
for (let target of radio_btns) {
	target.addEventListener(`change`, () => {
		// 出力エリアに結果を表示する
		document.querySelector(`#output`).innerHTML = `checked : ${target.value}`;
	});
}