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>
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>
- 1 What does your CSS look like? – Robert Harvey Commented Jul 14, 2009 at 15:02
- There's no CSS, see example below. – frontendbeast Commented Jul 14, 2009 at 18:07
3 Answers
Reset to default 4The 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/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 (".").
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 puter using IE7 and Firefox.
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.