JavaScript | ラジオボタン（radio）の切り替えイベントを実装する方法
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}`;
});
}