title: jQuery multiple checkbox filters
body: <p>I have a list of events, these events are each of a specific type, and start in a specific month. I have a checkbox group for types and one for months. What I'm trying to do is use the checkboxes to filter the list. I've got it working with one group, but can't seem to get it working with two.</p>
  
  <p>Basically I'm trying to set a class when I hide the list item, so I know which group hid it, but it seems to get confused. The class names are correct but some sometimes items do not get shown again. </p>
  
  <p>If anyone can see what I'm doing wrong, or think of a better solution that would be great! Thanks!</p>
  
  <p>Darren.</p>
  
  <p>My JavaScript: </p>
  
  <pre><code>$("#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;
  });
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;p&gt;Types:&lt;/p&gt;
  &lt;div&gt;&lt;input name="type[]" type="checkbox" id="type_0" value="0" class="type_check" checked="checked" /&gt;&lt;label for="type_0"&gt;Type 0&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input name="type[]" type="checkbox" id="type_1" value="1" class="type_check" checked="checked" /&gt;&lt;label for="type_1"&gt;Type 1&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input name="type[]" type="checkbox" id="type_2" value="2" class="type_check" checked="checked" /&gt;&lt;label for="type_2"&gt;Type 2&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input name="type[]" type="checkbox" id="type_3" value="3" class="type_check" checked="checked" /&gt;&lt;label for="type_3"&gt;Type 3&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input name="type[]" type="checkbox" id="type_4" value="4" class="type_check" checked="checked" /&gt;&lt;label for="type_4"&gt;Type 4&lt;/label&gt;&lt;/div&gt;
  
  &lt;p&gt;Starts:&lt;/p&gt;
  &lt;div&gt;&lt;input name="start[]" type="checkbox" id="start_072009" value="072009" class="start_check" checked="checked" /&gt;&lt;label for="type_072009"&gt;July 2009&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input name="start[]" type="checkbox" id="start_082009" value="082009" class="start_check" checked="checked" /&gt;&lt;label for="type_082009"&gt;August 2009&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input name="start[]" type="checkbox" id="start_092009" value="092009" class="start_check" checked="checked" /&gt;&lt;label for="type_092009"&gt;September 2009&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input name="start[]" type="checkbox" id="start_102009" value="102009" class="start_check" checked="checked" /&gt;&lt;label for="type_102009"&gt;October 2009&lt;/label&gt;&lt;/div&gt;
  
  &lt;p&gt;Events&lt;/p&gt;
  &lt;ul id="events"&gt;
      &lt;li id="1768" class="type_0 start_072009"&gt;Event 1&lt;/li&gt;
      &lt;li id="2190" class="type_1 start_072009"&gt;Event 2&lt;/li&gt;
      &lt;li id="2191" class="type_2 start_072009"&gt;Event 3&lt;/li&gt;
      &lt;li id="1864" class="type_2 start_082009"&gt;Event 4&lt;/li&gt;
      &lt;li id="1679" class="type_3 start_082009"&gt;Event 5&lt;/li&gt;
      &lt;li id="2042" class="type_0 start_092009"&gt;Event 6&lt;/li&gt;
      &lt;li id="1717" class="type_4 start_092009"&gt;Event 7&lt;/li&gt;
      &lt;li id="1917" class="type_4 start_092009"&gt;Event 8&lt;/li&gt;
      &lt;li id="1767" class="type_4 start_092009"&gt;Event 9&lt;/li&gt;
      &lt;li id="1866" class="type_2 start_102009"&gt;Event 10&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>