【JavaScript】ラジオボタンがクリックされたら（changeイベント）を実装する場合

ラジオボタンがクリックされたら（changeイベント）を実装する場合は下記のような記述をすればOKだ。

今回は、ラジオボタンがクリックされたら、バリューに設定されてるテキストをアラートで表示するという内容だ。

表示結果

See the Pen QWGZWeg by 山崎毅 (@nbudjgzu) on CodePen.

HTML

<input type="radio" name="cate" value="車">車
<input type="radio" name="cate" value="飛行機">飛行機
<input type="radio" name="cate" value="電車">電車

JavaScript

document.getElementsByName("cate").forEach(
    r => r.addEventListener("change" ,//ラジオボタンがクリックされたら
        e =>alert( "change:" + e.target.value)//ここの記述は好きに変えてOK
    )
);