CODEWITHSUNDEEP
javascriptjquerycheckboxfilter
frontendbeast
frontendbeast

Reputation: 1043

jQuery multiple checkbox filters

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>

Upvotes: 1

Views: 6718

Answers (3)

Robert Harvey
Robert Harvey

Reputation: 180777

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.

Upvotes: 0

Robert Harvey
Robert Harvey

Reputation: 180777

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.

Upvotes: 0

ithcy
ithcy

Reputation: 5589

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 (".").

Upvotes: 4

Related Questions