web関連

jQueryを使ってラジオボタンで表示切り替え

jQueryを使ってラジオボタンで表示切り替え

ラジオボタンで要素の切り替えやったのでメモ

以前タブの切り替えやった時のヤツ↓

htmlコード // タブの記述 タブ01 タブ02 タブ0...

ラジオボタンで切り替え実装

html
<div id="radioBtn">
	<label><input name="sample" type="radio" value="01" checked="checked" />ラジオボタン01</label>
	<label><input name="sample" type="radio" value="02" />ラジオボタン02</label>
	<label><input name="sample" type="radio" value="03" />ラジオボタン03</label>
</div>

<div id="displayBox">
	<div class="cm_box active">
		// 最初から表示
	</div>
	<div class="cm_box">
		// 最初は隠して表示01
	</div>
	<div class="cm_box">
		// 最初は隠して表示02
	</div>
</div>
css
#displayBox .cm_box {
  display: none;
}
#displayBox .cm_box.active {
  display: block;
}
js
$(function(){
	$('#radioBtn input').on('click', function(){
		var index = $('#radioBtn input').index(this);
		$('#displayBox .cm_box').eq(index).addClass('active').siblings('div').removeClass('active');
	});
});

スマートにjsを扱えるようになりたい