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

• すべて表示
• グループ 1
• グループ 2

• グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 1のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
• グループ 2のタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル

Javascript

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();
	}
}