Web制作

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を確認して条件分岐、それぞれの処理を行うように書いています。

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