BLOG

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

越水大輔

越水大輔

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

そんなときに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プロデューサー越水大輔

シンス株式会社 代表取締役
社内ではWeb制作のディレクション、マーケティング、経営を担当しています。Webマーケティングで福岡に元気な企業を増やします。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

Webマーケティングのお役立ち情報を発信しています!