jQuery複数のチェックボックスフィルタ

Question

私はイベントのリストを持っています。これらのイベントはそれぞれ特定のタイプであり、特定の月に開始します。私は種類のチェックボックスグループと月間のチェックボックスグループを持っています。私がしようとしているのは、チェックボックスを使ってリストをフィルタリングすることです。私は1つのグループと一緒に働いていますが、2つのグループで働くことはできません。

基本的に私はリストアイテムを隠すときにクラスを設定しようとしているので、どのグループが隠れているのか分かりますが、混乱するようです。クラス名は正しいが、時にはアイテムが再び表示されないことがあります。

誰かが私が間違っていることを見ることができますか、それとも素晴らしい解決策があると思いますか？ありがとう！

ダレン。

私はJavaScript：

$("#options input.type_check").change(function() { 
    if($(this).is(':checked')) { 
     $("#events li."+$(this).attr('id')).removeClass('type_hidden'); 
     if(!$("#events li."+$(this).attr('id')).hasClass('start_hidden')) { 
      $("#events li."+$(this).attr('id')).slideDown(); 
     } 
    } else { 
     $("#events li."+$(this).attr('id')).addClass('type_hidden'); 
     $("#events li."+$(this).attr('id')).slideUp(); 
    } 
    return false; 
}); 

$("#options input.start_check").change(function() { 
    if($(this).is(':checked')) { 
     $("#events li."+$(this).attr('id')).removeClass('start_hidden'); 
     if(!$("#events li."+$(this).attr('id')).hasClass('type_hidden')) { 
      $("#events li."+$(this).attr('id')).slideDown();  
     } 
    } else { 
     $("#events li."+$(this).attr('id')).addClass('start_hidden'); 
     $("#events li."+$(this).attr('id')).slideUp(); 
    } 
    return false; 
}); 

マイHTML：

<p>Types:</p> 
<div><input name="type[]" type="checkbox" id="type_0" value="0" class="type_check" checked="checked" /><label for="type_0">Type 0</label></div> 
<div><input name="type[]" type="checkbox" id="type_1" value="1" class="type_check" checked="checked" /><label for="type_1">Type 1</label></div> 
<div><input name="type[]" type="checkbox" id="type_2" value="2" class="type_check" checked="checked" /><label for="type_2">Type 2</label></div> 
<div><input name="type[]" type="checkbox" id="type_3" value="3" class="type_check" checked="checked" /><label for="type_3">Type 3</label></div> 
<div><input name="type[]" type="checkbox" id="type_4" value="4" class="type_check" checked="checked" /><label for="type_4">Type 4</label></div> 

<p>Starts:</p> 
<div><input name="start[]" type="checkbox" id="start_072009" value="072009" class="start_check" checked="checked" /><label for="type_072009">July 2009</label></div> 
<div><input name="start[]" type="checkbox" id="start_082009" value="082009" class="start_check" checked="checked" /><label for="type_082009">August 2009</label></div> 
<div><input name="start[]" type="checkbox" id="start_092009" value="092009" class="start_check" checked="checked" /><label for="type_092009">September 2009</label></div> 
<div><input name="start[]" type="checkbox" id="start_102009" value="102009" class="start_check" checked="checked" /><label for="type_102009">October 2009</label></div> 

<p>Events</p> 
<ul id="events"> 
    <li id="1768" class="type_0 start_072009">Event 1</li> 
    <li id="2190" class="type_1 start_072009">Event 2</li> 
    <li id="2191" class="type_2 start_072009">Event 3</li> 
    <li id="1864" class="type_2 start_082009">Event 4</li> 
    <li id="1679" class="type_3 start_082009">Event 5</li> 
    <li id="2042" class="type_0 start_092009">Event 6</li> 
    <li id="1717" class="type_4 start_092009">Event 7</li> 
    <li id="1917" class="type_4 start_092009">Event 8</li> 
    <li id="1767" class="type_4 start_092009">Event 9</li> 
    <li id="1866" class="type_2 start_102009">Event 10</li> 
</ul> 

Answer 1

IDがあなたのLIの属性は無効である - 彼らはただの数字にすることはできません。 Javascriptは、割り当てをしようとすると、おそらく窒息するでしょう。

標準参照： 文字（[A-ZA-Z]）で始まる必要がありをトークンhttp://www.w3.org/TR/REC-html40/types.html#type-name

IDとNAMEおよび文字の任意の数によって を追跡することができる、数字ハイフン（ - ）、アンダースコア （ "_"）、コロン（ "："）、ピリオド （ "。"）のいずれかを入力します。

Answer 2

変更この行：これに

$("#options input.type_check").change(function() { 

：

$("#options input.type_check").click(function() { 

あなたstart_checkセレクタと同様の変化を確認します。これにより、チェックボックスにchangeイベントの代わりにclickイベントがフックされます。このイベントは、マウスまたはキーボードを使用してチェックボックスを変更した場合に発生します。

IE7とFirefoxを使用して自分のコンピュータでテストしました。

Answer 3

OKです。変更：

if(!$("#events li."+$(this).attr('id')).hasClass('start_hidden')) { 
    $("#events li."+$(this).attr('id')).slideDown(); 
} 

へ：

$("#events li).not(".type_hidden, .start_hidden").slideDown(); 

両方の場所インチ