jQuery isotope checkbox filter, if all uncheck show no item

Question

This is regarding input checkbox for filtering jQuery isotope itemselector.

Refer to demo here, checkboxes are checked when the page is load. However I stumble upon the problem when all is unchecked by user, it will just show all .items instead of an empty container.

$checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values                
    $checkboxes.filter(':checked').each(function(){
    filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $container.isotope({ filter: filters });
});

Many thanks in advance, cheers

Answer 1

The isotope library is working as intended.

filter - Setting a filter with show item elements that match the selector, and hide elements that do not match.

Values '*' or '' (an empty string): Shows all item elements

If you do not want this behaviour, and instead want to not show any elements when every filter is selected, you should change the filter string to be something that does not exist e.g.

if(filters.length == 0){
    filters = 'purplemonkyeydishwasher';
}
else{
    filters = filters.join(', ');
}
$container.isotope({ filter: filters });

This will then have the behaviour you want. I updated the fiddle. and it now hides all the elements when all the filters are selected.

Answer 2

You can simply do this:

$container.isotope({ filter: ( filters == null || filters.length == 0 ) ? 'default' : filters });`

Where default is always unused. See the demo http://jsfiddle.net/G6LRL/