Blog スタッフブログ

JavaScript WEB制作 システム開発

[jQuery]radioでの表示切替のしかた

システム開発担当のTFです。

やり方

  • 表示切替の為の radio を用意する
  • 表示切替部分に id や class 等をふりjQueryで触れるようにする
  • radio の onChange 時に表示切替の処理をする

サンプル

<!-- 省略 -->

<input type="radio" name="kind" value="1" onChange="changeKind();" checked> 切替1 <br />
<input type="radio" name="kind" value="2" onChange="changeKind();"> 切替2 <br />

<div id="kind_area_1">
	切替1の表示領域
</div>

<div id="kind_area_2">
	切替2の表示領域
</div>

<!-- 省略 -->

<script>
$(function(){
	// 初回
	changeKind();
});

function changeKind()
{
	// 表示切替
	if ($('input[name="kind"]:checked').val() == "1") {
		$("#kind_area_1").show();
		$("#kind_area_2").hide();
	} else {
		$("#kind_area_1").hide();
		$("#kind_area_2").show();
	}
}

</script>

<!-- 省略 -->
戻る一覧へ戻る