Search code examples
jquerysortingquicksand

Foreach checked checkbox do quicksand jquery plugin

Based on http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/ tutorial I am trying to implement a sort function to my app.

The problem:

I have the items that I will sort later with quicksand jquery plugin in this format:

<ul>
<li class="car">Audi A6</li>
<li class="car">Audi A8</li>
<li class="car">BMW 328Ci</li>
<li class="hobby">Skying</li>
<li class="hobby">Skating</li>
<li class="hobby">Running</li>
<li class="food">Pizza</li>
<li class="food">Salat</li>
<li class="food">Chicken</li>
</ul>

and then I have 3 checkboxes to be used to sort what to show and what to not:

    <ul id="filter_sources">
        <li><input type="checkbox" id="source" value="car" />car</li>
        <li><input type="checkbox" id="source" value="hobby" />hobby</li>
        <li><input type="checkbox" id="source" value="food" />food</li>
    </ul>

What I want to do is that for each checked checkbox run the quicksand plugin and show the checked boxes, so if the car and hobby checkboxes are checked to show car and hobby lists

I am asking this because in the tutorial they do it this way:

$('#filter_sources').live('click',function(e){
        var link = $(this);

        link.addClass('active').siblings().removeClass('active');

        // Using the Quicksand plugin to animate the li items.
        // It uses data('list') defined by our createList function:

        $('#videosList').quicksand(link.data('list').find('li'));
        e.preventDefault();
    });

and I did some attempts to try for each checked input but I didn't succeed.

Solution

  • Tested and, demonstrably, working:

    $('input:checkbox').change(
    function(){
        var show = $('input:checkbox:checked').map(function(){
                           return $(this).val();
                   });
        console.log(show);
        $('#list li').each(
            function(){
                if ($.inArray($(this).attr('class'),show) > -1) {
                    $(this).show();
                }
                else {
                    $(this).hide();
                }
            });
    });

    JS Fiddle demo.

    Note that, for the sake of simplicity, and to avoid the not() method, I opted to assign an id to the list containing the elements to be filtered.

    Edited in response to comment from OP:

    [Only] one problem, when you deselect all the checkboxes after selecting any of them all the results vanishes...

    $('input:checkbox').change(
    function(){
        var show = $('input:checkbox:checked').map(function(){
                           return $(this).val();
                   });
        if (show.length > 0){
            $('#list li').each(
                function(){
                    if ($.inArray($(this).attr('class'),show) > -1) {
                        $(this).show();
                    }
                    else {
                        $(this).hide();
                    }
                });
        }
        else {
            $('#list li').show();
        }
    });

    JS Fiddle demo. References: