JavaScript | ラジオボタン(radio)の切り替えイベントを実装する方法

JavaScript,JavaScript イベント

JavaScriptでジオボタン(radio)の入力切り替えをトリガーにしたイベントの実装方法を紹介しています。

ラジオボタン(radio)の切り替えイベント

addEventListener()メゾットを使ってラジオボタンの切り替えがあった場合に、それをトリガーとしたイベントを実装するシンプルな動作サンプルとサンプルコードです。

See the Pen JavaScript | Checkbox Event by yochans (@yochans) on CodePen.

HTMLはサンプル用にシンプルなラジオボタンを設置しています。

「A」「B」「C」という値をもつラジオボタンで、デフォルトではAがチェックされている状態としています。

pタグの「.output」はテスト出力用のスペースです。

<div class="container">
	<p><input type="radio" name="type" value="A" checked>A</p>
	<p><input type="radio" name="type" value="B">B</p>
	<p><input type="radio" name="type" value="C">C</p>
</div>

<p id="output">Change the radio</p>

ラジオボタン要素のセレクタ取得はquerySelectorAll()を指定しています。
小さなフォームコンテンツであればinput[type=’radio’] や input[name=’type’] でも問題ありませんが、重複してしまうのを避ける為、2つ指定して確実にしています。

実装時にclass名を付与しているならgetElementsByClassNameなどでも良いでしょう。
関連:JavaScript | querySelector()とquerySelectorAll()の使い方、指定方法まとめ | ONE NOTES

取得したラジオボタンは配列として格納されていますので、全ての子要素にイベントを割り当てるようにします。

この記事ではaddEventListener()で「change」を指定する事でユーザーによる変更を取得します。

サンプルではテスト出力用のpタグに内容を表示しています。

let radio_btns = document.querySelectorAll(`input[type='radio'][name='type']`);

for (let target of radio_btns) {
	target.addEventListener(`change`, function () {
		document.querySelector(`#output`).innerHTML = `${target.value} : ${target.checked}`;
	});
}

以下は上記サンプルコードのアロー関数バージョンになります。

let radio_btns = document.querySelectorAll(`input[type='radio'][name='type']`);

for (let target of radio_btns) {
	target.addEventListener(`change`, () => {
		document.querySelector(`#output`).innerHTML = `${target.value} : ${target.checked}`;
	});
}

JavaScript,JavaScript イベント

Posted by Yousuke.U