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

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

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

demo page

…ここからが続き

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

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();
	}
}
  1. 上記Javascriptと読み込ませる。
  2. inputタグのnameを「switch」にする。
  3. inputタグのclassの名前「check」にする。
  4. liにつけるclass名とvalue内を名前を同じにする。
  5. 後は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>

Comments

ハル

ハル

お返事ありがとうございます。
なるほど、いろいろ勉強しながら頑張ってみようと思います。
ありがとうございました!

2010年02月04日 20:52

MIYA

MIYA

ハルさん。はじめまして。

出来るとは思いますよ。そのボタンに値を入れてクリック後にアクションって感じになるかと思いますが、このjQueryのソースでとは違う書き方をしないといけないですね…

2010年02月04日 11:35

ハル

ハル

はじめまして。
いろいろ勉強しながら、こちらのサイトにたどり着きました。
こちらのソースを利用させていただきたいのですが、ラジオで選択した後に、ボタンでクリックしてから該当するグループを表示させることはできますでしょうか?

2010年02月03日 21:36

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article