CODEWITHSUNDEEP
javascriptjquery
EducateYourself
EducateYourself

Reputation: 979

Jquery filter checkbox array

I just want to make filter with checkbox array using jquery. It works fine when only one checkbox is selected but when I select two or more checkboxes it doesnot show all the divs. Could you please help me to find my mistake.

http://jsfiddle.net/EducateYourself/vr8noyyL/19/

<div id="filters">
    <div class="filterblock">
        <input id="check1" type="checkbox" name="check" value="cola" class="category">
        <label for="check1">Cola</label>
    </div>
    <div class="filterblock">
        <input id="check2" type="checkbox" name="check" value="fanta" class="category">
        <label for="check2">Fanta</label>
    </div>
    <div class="filterblock">
        <input id="check3" type="checkbox" name="check" value="sprite" class="category">
        <label for="check3">Sprite</label>
    </div>
</div>

Upvotes: 0

Views: 911

Answers (2)

PeterKA
PeterKA

Reputation: 24638

Use the jQuery filter() method and, use .data() instead of .attr():

$(document).ready(function () {
    $('.category').on('change', function () {
        //select all target elements, hide them, and filter ....
        $('.resultblock').hide().filter(function() {
            //initialize flag
            var found = -1;
            //save reference to current element for use in .each
            var that = $(this);
            //check if current element has any of the checked tags
            $(':checkbox[name=check]:checked').each(function() {
                if( that.data('tag').split(' ').indexOf( this.value ) > -1 ) {
                    //set flag
                    found = 1;
                    //exit .each, no more iterations needed
                    return false;
                }
            });
            //only elements where found is set to 1 would be returned
            return found > -1;
        //show elements in result set
        }).show();
    });
});

DEMO 1

And, if you want the pages to start off correctly - nothing showing as no tag checkbox is selected - just trigger the change event when the page loads.

        ....
        //show elements in result set
        }).show();
    }).change(); //<<<<----
});

DEMO 2

UPDATE

In order for selecting all and selecting none to both show everything, update DEMO 1 as follows:

            ....
            }).length > 0 || (found = 1); //<<<<<---
            return found > -1;
        }).show();
    });
});

DEMO 3

Upvotes: 2

Gregg Duncan
Gregg Duncan

Reputation: 2725

Your fiddle doesn't work because you don't have jQuery included. in the left dropdown box. But once you include jQuery it works somewhat. The question is how do you want to filter.

If 2 items are checked do you want to show those that have either item (inclusive)? Or do you want to show those items that have both (exclusive)?

Start by getting all the filters in an array:

 $('.resultblock').hide();
 var values = $("#filters input:checkbox:checked").map(function(){
                          return $(this).val();
                        }).get();

Inclusive filter is easy:

 $.each(values, function(idx, val){
     $('.resultblock[data-tag*="' + val + '"]').show();
 });

Exclusive filter is a little harder:

$.each($('.resultblock'), function(i, block){
    var $self = $(block);
    var show = true;
    var tag = $self.data('tag');
    $.each(values, function(idx, val){
        if(tag.indexOf(val) === -1){
            show = false;
            return;
        }
    });
    if(show){
        $self.show();
    }
});

here's a fiddle showing both: the inclusive is currently commented out: http://jsfiddle.net/vr8noyyL/16/

Upvotes: 1

Related Questions