Re: jQuery Multiple Checkbox Page Filter

Question

This question is an extension of jQuery Multiple Checkbox Page Filter . It's my question exactly.

I have three goals:

I want to have a list of check boxes to filter Page Content.
I want to return only the content that matches all of the currently checked boxes, hiding all the rest.
If no boxes are checked, everything should show.

As previously discussed in the above question, goals A and C were accomplished with:

$('div.tags').delegate('input:checkbox', 'change', function()
{
     var $lis = $('.results > li').hide();
     //For each one checked
     $('input:checked').each(function()
     {
          $lis.filter('.' + $(this).attr('rel')).show();
     });      
});

and goal B was accomplished with:

var selector = $('input:checked').map(function ()
{
    return $(this).attr('rel');
}).get().join('.');
$lis.filter(selector).doWhatever();

But I don't know how to integrate these two scripts together?

Matt Ball · Accepted Answer · 2012-03-17 15:33:01Z

0

Give this a shot: http://jsfiddle.net/mattball/tkLK6/

$('div.tags').delegate('input[type=checkbox]', 'change', function()
{
    var $lis = $('.results > li'),
        $checked = $('input:checked');

    if ($checked.length)
    {
        var selector = $checked.map(function ()
        {
            return '.' + $(this).attr('rel');
        }).get().join('');

        $lis.hide().filter(selector).show();     
    }
    else
    {
        $lis.show();
    }
});

edited Mar 17, 2012 at 15:33

answered Mar 17, 2012 at 13:39

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1272827 Over a year ago

I've taken a shot at understanding the logic at jsfiddle.net/gd276/7 so far it hasn't worked. I've seen what I'm trying to do at dfs.co.uk/sofas/leather-sofas but your code is a lot simpler. I don't think I'm accounting for taking a List, refining it through Checkbox A, and then taking the remaining list and refining through Checkbox B. Let me know if what I'm trying to do would be a massive script.

Collectives™ on Stack Overflow

Re: jQuery Multiple Checkbox Page Filter

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related