デザイン
2021.09.12
jQueryでラジオボタンの選択によって要素の表示・非表示を行う方法
お問い合わせフォームなどで、選択されているラジオボタンによって表示される要素の出し分けを行いたいときがあります。
そんなときにjQueryでチェックされたラジオボタンを判別できると便利です。今回はそんなコードをまとめておきます。
まず、このようなHTMLがあったとします。
<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で最初に表示させておく要素を指定しておきます。
.text {
display: none;
}
.text01 {
display: block;
}idがaのラジオボタンが選択されているときはテキストAAAを表示、idがbのラジオボタンが選択されているときはテキストBBBを表示させるようにしたい場合、次のようなjQueryを書きました。
$(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を確認して条件分岐、それぞれの処理を行うように書いています。
同じような条件分岐で、要素の表示・非表示だけではなく様々な動作にも応用が効くのでぜひ使ってみてください。
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
