www.webdeveloper.com
Results 1 to 2 of 2

Thread: Checkboxes filter

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    1

    Checkboxes filter

    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>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles