Menu
Hi guys,
I’m trying to make the following code work, but my JS skills are so basic, I can’t find the bug
This code is meant to filter a list based on arrays of checkboxes
The code is very probably bug free
The problem certainly comes from something stupid like not declaring JS correctly, not testing in the right conditions or not calling a required script
Thanks a million!
[CODE]
<html>
<head>
<script type=”text/JavaScript”>
<!–
$(“#options input.type_check”).click(function() {
if($(this).is(‘:checked’)) {
$(“#events li.”+$(this).attr(‘id’)).removeClass(‘type_hidden’);
if(!$(“#events li.”+$(this).attr(‘id’)).hasClass(‘start_hidden’)) {
$(“#events li).not(“.type_hidden, .start_hidden”).slideDown();
}
} else {
$(“#events li.”+$(this).attr(‘id’)).addClass(‘type_hidden’);
$(“#events li.”+$(this).attr(‘id’)).slideUp();
}
return false;
});
$(“#options input.start_check”).click(function() {
if($(this).is(‘:checked’)) {
$(“#events li.”+$(this).attr(‘id’)).removeClass(‘start_hidden’);
if(!$(“#events li.”+$(this).attr(‘id’)).hasClass(‘type_hidden’)) {
$(“#events li).not(“.type_hidden, .start_hidden”).slideDown();
}
} else {
$(“#events li.”+$(this).attr(‘id’)).addClass(‘start_hidden’);
$(“#events li.”+$(this).attr(‘id’)).slideUp();
}
return false;
});
}
//–>
</script>
</head>
<body>
<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=”a1768″ class=”type_0 start_072009″>Event 1</li>
<li id=”a2190″ class=”type_1 start_072009″>Event 2</li>
<li id=”a2191″ class=”type_2 start_072009″>Event 3</li>
<li id=”a1864″ class=”type_2 start_082009″>Event 4</li>
<li id=”a1679″ class=”type_3 start_082009″>Event 5</li>
<li id=”a2042″ class=”type_0 start_092009″>Event 6</li>
<li id=”a1717″ class=”type_4 start_092009″>Event 7</li>
<li id=”a1917″ class=”type_4 start_092009″>Event 8</li>
<li id=”a1767″ class=”type_4 start_092009″>Event 9</li>
<li id=”a1866″ class=”type_2 start_102009″>Event 10</li>
</ul>
</body>
</html>