ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

jQueryでラジオボタンの選択によって要素の表示・非表示を行う方法

| カテゴリー : JavaScript

お問い合わせフォームなどで、選択されているラジオボタンによって表示される要素の出し分けを行いたいときがあります。

そんなときにjQueryでチェックされたラジオボタンを判別できると便利です。今回はそんなコードをまとめておきます。

まず、このようなHTMLがあったとします。

CSSで最初に表示させておく要素を指定しておきます。

id=”a”のラジオボタンが選択されているときはテキストAAAを表示id=”b”のラジオボタンが選択されているときはテキストBBBを表示させるようにしたい場合、次のようなjQueryを書きました。

name=”btn”のラジオボタンがクリックされるときに動作するjQueryのコードです。

選択されたラジオボタンのidを確認して条件分岐、それぞれの処理を行うように書いています。

実際の動作は以下のCodePenでご確認ください。

See the Pen dzEjra by Daisuke Koshimizu (@dkossy) on CodePen.

同じような条件分岐で、要素の表示・非表示だけではなく様々な動作にも応用が効くのでぜひ使ってみてください。

それではまた!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。