Checkboxes filter

**dude1** · 04-25-2012, 07:57 AM

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>

**Kor** · 04-25-2012, 08:40 AM

That is not native JavaScript, that is a code written using custom methods belonging to a certain JavaScript library, probably JQuery.

Before using a library make sure you have learned the JavaScript language.

Thread: Checkboxes filter

Thread Tools

Display

Hybrid View

Checkboxes filter

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions