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

Web技術

2021.02.252021.03.08

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

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

表示結果
HTML
JavaScript

表示結果

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
    )
);

(Visited 8,773 times, 1 visits today)

zoritoler imol より:

2026年7月20日 01:31

I went over this web site and I believe you have a lot of good information, saved to favorites (:.

返信
Mainsports より:

2026年9月10日 04:06

Some truly nice and utilitarian info on this website, also I think the design holds excellent features.

返信
https://southfloridakiteboarding.com より:

2026年9月21日 07:03

I am very happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this best doc.

返信