Question

I am trying to get a product filter working which is almost there. I want to the user to be able to select shirt, which then shows all shirts then blue which shows all blue shirts and then in they check pink it shows all blue and pink shirts. At the moment I can only get it to show if all conditions are true but I want it to show if any of that dataset is true

My fiddle is here

http://jsfiddle.net/ktcle/2keVN/2/

$('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().addClass("show");     
}
else
{
    $lis.show().removeClass("show");
}
});

Answer 1

Try this:

EDIT: I’ve modified the method to be able to filter exclusively. This way, you’ll be able to filter by, say, shirts and trousers that are green or pink.

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

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

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

        $lis = $lis.filter(":visible");

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

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

When you were building up your “selector” string, you were just concatenating it. jQuery will then only filter those items which have ALL the classes in your selector.

I agree with David Thomas. Rather make the selection of clothing type a mutually exclusive one, i.e. radio buttons.