jQueryを使ってラジオボタンでグループ表示を選択する

Category
： Javascript

どういう仕組みかと言うと上記画像の用にグループ 1のラジオボタンを選択するとグループ 1のみ表示され、グループ 2を選択するとグループ 2のみ表示されるって感じです。

ラジオボタンでグループ表示を選択仕組み

ulを使ってのリスト一覧のサンプルソース

jQuery( document ).ready( function() {
	if ( jQuery( "input[@name='switch']:checked").val() == undefined ) {
		var val = "all";
		} else {
			var val = jQuery( "input[@name='switch']:checked").val();
		}
		show(val);
		
		jQuery( ".check").click( function() {
			show( jQuery(this).val() );
			});
		});
		
		function show( val ) {
			if( val == "all" ) {
			jQuery( "#tabBox li" ).show();
		} else {
			jQuery( "#tabBox li" ).hide();
			jQuery( "#tabBox li." + val ).show();
	}
}

上記Javascriptと読み込ませる。
inputタグのnameを「switch」にする。
inputタグのclassの名前「check」にする。
liにつけるclass名とvalue内を名前を同じにする。
後はclass名にあわせてCSSのbackgroundにアイコンなり画像を指定する。

<ul id="switchNavi">
<li class="all"><input name="switch" type="radio" id="switchall" value="all" class="check" checked="checked" /><label for="switchall">すべて表示</label></li>
<li class="group1"><input name="switch" type="radio" id="switchgroup1" value="group1" class="check" /><label for="switchgroup1">グループ 1</label></li>
<li class="group2"><input name="switch" type="radio" id="switchgroup2" value="group2" class="check" /><label for="switchgroup2">グループ 2 </label></li>
</ul>

<ul id="tabBox">
<li class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<li class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</a></li>
<!--/ #tabBox--></ul>

新着情報などで使えそうなdlを使った一覧のサンプルソース<

jQuery( document ).ready( function() {
	if ( jQuery( "input[@name='switch']:checked").val() == undefined ) {
		var val = "all";
		} else {
			var val = jQuery( "input[@name='switch']:checked").val();
		}
		show(val);
		
		jQuery( ".check").click( function() {
			show( jQuery(this).val() );
			});
		});
		
		function show( val ) {
			if( val == "all" ) {
			jQuery( "#tabBox dt,#tabBox dd" ).show();
		} else {
			jQuery( "#tabBox dt,#tabBox dd" ).hide();
			jQuery( "#tabBox ." + val ).show();
	}
}

使用方法は基本、上のサンプルと同じです。

<ul id="switchNavi">
<li class="all"><input name="switch" type="radio" id="switchall" value="all" class="check" checked="checked" /><label for="switchall">すべて表示</label></li>
<li class="group1"><input name="switch" type="radio" id="switchgroup1" value="group1" class="check" /><label for="switchgroup1">グループ 1</label></li>
<li class="group2"><input name="switch" type="radio" id="switchgroup2" value="group2" class="check" /><label for="switchgroup2">グループ 2 </label></li>
</ul>

<dl id="tabBox">
<dt class="group1">2008/10/02</dt>
<dd class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<dt class="group2">2000/10/01</dt>
<dd class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<dt class="group1">2008/10/02</dt>
<dd class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<dt class="group2">2000/10/01</dt>
<dd class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<dt class="group1">2008/10/02</dt>
<dd class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<dt class="group2">2000/10/01</dt>
<dd class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<dt class="group1">2008/10/02</dt>
<dd class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<dt class="group2">2000/10/01</dt>
<dd class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<dt class="group1">2008/10/02</dt>
<dd class="group1"><a href="#header">グループ 1のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<dt class="group2">2000/10/01</dt>
<dd class="group2"><a href="#header">グループ 2のタイトルタイトルタイトルタイトルタイトルタイトル</a></dd>
<!--/ #tabBox--></dl>