Foreach checked checkbox do quicksand jquery plugin

Question

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.

David Thomas · Accepted Answer · 2012-01-02T20:32:50.593

3

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:

edited Jan 02 '12 at 20:32

answered Jan 02 '12 at 20:09

David Thomas

249,100
51
377
410

only one problem, when you deselect all the checkboxes after selecting any of them all the results vanishes :D – Alex Jan 02 '12 at 20:25
Well, yes. What would your preferred option be, if there was nothing checked? No filtering at all, I'm guessing? – David Thomas Jan 02 '12 at 20:27
no, if none checked it needs to show all of the lists results – Alex Jan 02 '12 at 20:28
Edited the answer to check for filtering and, if there is no filtering selected, amended to show the whole list. – David Thomas Jan 02 '12 at 20:33
amaHAZING :). Thank you very much and wish you a very great year and prosperous – Alex Jan 02 '12 at 20:34
Well, thank you kindly! And I'm glad to have been of help, thank you for the accept and the up-vote (assuming they're both yours, obviously) =D – David Thomas Jan 02 '12 at 20:35
yes they are David, but I have come back to ask you if you could explain what the **> -1** at `if ($.inArray($(this).attr('class'),show) > -1)` because I need to add an if only 1 checkbox is selected show something else – Alex Jan 15 '12 at 20:08
I have some issues... I need to check if only 1 checkbox is selected and it keeps giving me problems when trying with `if ($.inArray($(this).attr('class'),show) == 0){}` because I want that if 1 checkbox is checked to do a `if($(this).attr('class') == 'box') ... ` . Am I checking it the right way for if only 1 checkbox? – Alex Jan 26 '12 at 01:00

Foreach checked checkbox do quicksand jquery plugin

1 Answers1