お問い合わせフォームなどで、選択されているラジオボタンによって表示される要素の出し分けを行いたいときがあります。
そんなときにjQueryでチェックされたラジオボタンを判別できると便利です。今回はそんなコードをまとめておきます。
まず、このようなHTMLがあったとします。
1 2 3 4 5 6 7 | <ul> <li><input type="radio" name="btn" id="a" checked="checked">このボタンをクリックするとAAAが表示されます。</li> <li><input type="radio" name="btn" id="b">このボタンをクリックするとBBBが表示されます。</li> </ul> <div class="text text01">AAA</div> <div class="text text02">BBB</div> |
CSSで最初に表示させておく要素を指定しておきます。
1 2 3 4 5 6 | .text { display: none; } .text01 { display: block; } |
idがaのラジオボタンが選択されているときはテキストAAAを表示、idがbのラジオボタンが選択されているときはテキストBBBを表示させるようにしたい場合、次のようなjQueryを書きました。
1 2 3 4 5 6 7 8 9 10 11 | $(function() { $('[name="btn"]:radio').change( function() { if($('[id=a]').prop('checked')){ $('.text').fadeOut(); $('.text01').fadeIn(); } else if ($('[id=b]').prop('checked')) { $('.text').fadeOut(); $('.text02').fadeIn(); } }); }); |
name=”btn”のラジオボタンがクリックされるときに動作するjQueryのコードです。
選択されたラジオボタンのidを確認して条件分岐、それぞれの処理を行うように書いています。
実際の動作は以下のCodePenでご確認ください。
See the Pen dzEjra by Daisuke Koshimizu (@dkossy) on CodePen.
同じような条件分岐で、要素の表示・非表示だけではなく様々な動作にも応用が効くのでぜひ使ってみてください。
それではまた!
求人目的のブランディングサイトからネットショップ構築まで、幅広いホームページ制作に対応します。