jQuery filtres checkbox multiples

Question

J'ai une liste d'événements, ces événements sont chacun d'un type spécifique, et commencent dans un mois spécifique. J'ai un groupe de case à cocher pour les types et un pour les mois. Ce que j'essaie de faire est d'utiliser les cases à cocher pour filtrer la liste. Je l'ai fait travailler avec un groupe, mais n'arrive pas à le faire fonctionner avec deux.

Fondamentalement, j'essaie de définir une classe lorsque je cache l'élément de la liste, donc je sais quel groupe l'a caché, mais il semble être confus. Les noms de classe sont corrects mais certains éléments ne sont parfois pas affichés à nouveau.

Si quelqu'un peut voir ce que je fais de mal, ou penser à une meilleure solution ce serait génial! Merci!

Darren.

JavaScript My:

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

Mon 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

L'ID attributs de vos LIs ne sont pas valides - ils ne peuvent pas être seulement des chiffres. Javascript va probablement s'étouffer en essayant de faire des devoirs sur eux.

Voir la norme: http://www.w3.org/TR/REC-html40/types.html#type-name

ID et NOM jetons doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis par un certain nombre de lettres, chiffres ([0-9]), tirets ("-"), souligne ("_"), les deux-points (":"), et les périodes (".").

Answer 2

Modifier cette ligne:

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

à ceci:

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

Faire un changement similaire à votre sélecteur de start_check. Cela accroche l'événement click au lieu de l'événement change dans vos cases à cocher. Cet événement se déclenchera si la souris ou le clavier est utilisé pour modifier la case à cocher.

Je l'ai testé sur mon ordinateur en utilisant IE7 et Firefox.

Answer 3

OK, voici la solution. Changer:

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

à:

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

dans les deux endroits.