ぱーくんのサイト別館

ぱーくん plus idea

【javascript】ラジオボタンがクリックされたイベントをハンドリングする

 
この記事を書いている人 - WRITER -
ご訪問ありがとうございます(^^)
副業でネットビジネスに取り組んでいるぱーくんと申します。

激務でも増えない給料に失望し、将来のために別の収入源が欲しい!の一心でネットビジネスをはじめ、2018年4月に20万円達成。

ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。

誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
詳しいプロフィールはこちら

ラジオボタンがクリックされたり、選択されたイベントをハンドリングするコードです。
チェック状態が変更された際に実行されます。

ラジオボタンの場合は、同じラジオボタングループにする場合、nameの値を同じにします。
そのため、nameを使うと一意のオブジェクトにならず、イベントハンドラを登録しづらいですよね。
それぞれにID属性を付けてもいいですが、ラジオボタンのオプションすべてに一意なIDを振るのも。。。という場合には以下のTipsが使えます。

 

そこで、getElementsByName()で同じラジオボタングループの要素を配列で取得し、それに対して、forEachでイベントリスナを登録すると、どのラジオボタンを押してもイベントが発火します。
どのボタンがチェックされたのかを取得するには、querySelectorとchecked属性を使うといいでしょう。

 

HTML側のソース

 

JavaScript側のソース(イベントリスナを配列に登録)

この記事を書いている人 - WRITER -
ご訪問ありがとうございます(^^)
副業でネットビジネスに取り組んでいるぱーくんと申します。

激務でも増えない給料に失望し、将来のために別の収入源が欲しい!の一心でネットビジネスをはじめ、2018年4月に20万円達成。

ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。

誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© ぱーくん plus idea , 2019 All Rights Reserved.