jQuery multiple checkbox filters

Question

Hi All,

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.

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.

If anyone can see what I'm doing wrong, or think of a better solution that would be great! Thanks!

Darren.

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

My 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

The ID attributes on your LIs are invalid - they can't be just numbers. Javascript will probably choke when trying to make assignments on them.

See the standard: http://www.w3.org/TR/REC-html40/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Answer 2

Change this line:

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

To this:

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

Make a similar change to your start_check selector. This hooks the click event instead of the change event on your checkboxes. This event will fire whether the mouse or the keyboard is used to alter the checkbox.

I tested it on my computer using IE7 and Firefox.

Answer 3

OK, here's the fix. Change:

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

to:

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

in both places.

Answer 4

Great Tutorial, But if I start the page up all checkboxes are selected but I want to the checkboxes to be unselected. I don't know how i can make this work. Can you help me with this?

thanx,