SO - 18765192

by Arun P Johny

HTML

<form id="refine-cat">
<span><input type="checkbox" value="1" name="filtercol">cat 1</span>
<span><input type="checkbox" value="2" name="filtercol">cat 2</span>
<span><input type="checkbox" value="3" name="filtercol">cat 3</span>
</form>
<form id="refine-col">
<span><input type="checkbox" value="1" name="filtercat">col 1</span>
<span><input type="checkbox" value="2" name="filtercat">col 2</span>
<span><input type="checkbox" value="3" name="filtercat">col 3</span>
<span><input type="checkbox" value="4" name="filtercat">col 4</span>
</form>
<ul>
    <li class="item cat-3 col-1">number 3</li>
    <li class="item cat-3 col-1">number 3</li>
    <li class="item cat-3 col-1">number 3</li>
    <li class="item cat-1 col-1">number 1</li>
    <li class="item cat-1 col-2">number 1</li>
    <li class="item cat-2 col-1">number 2</li>
    <li class="item cat-2 col-2">number 2</li>
    <li class="item cat-2 col-3">number 2</li>
    <li class="item cat-2 col-4">number 2</li>
    <li class="item cat-3 col-2">number 3</li>
    <li class="item cat-3 col-2">number 3</li>
    <li class="item cat-3 col-2">number 3</li>
    <li class="item cat-1 col-2">number 1</li>
    <li class="item cat-1 col-1">number 1</li>
    <li class="item cat-2 col-4">number 2</li>
    <li class="item cat-2 col-3">number 2</li>
    <li class="item cat-2 col-3">number 2</li>
    <li class="item cat-2 col-3">number 2</li>
    <li class="item cat-3 col-2">number 3</li>
    <li class="item cat-3 col-4">number 3</li>
    <li class="item cat-3 col-1">number 3</li>
    <li class="item cat-1 col-1">number 1</li>
    <li class="item cat-1 col-1">number 1</li>
    <li class="item cat-2 col-2">number 2</li>
    <li class="item cat-2 col-3">number 2</li>
    <li class="item cat-2 col-3">number 2</li>
    <li class="item cat-2 col-2">number 2</li>
</ul>

CSS

ul, #refine-cat, #refine-col {
    float:left;
    width:100%
}

JavaScript

var $items = jQuery('.item');
var $cats = jQuery('#refine-cat input[type=checkbox]');
var $cols = jQuery('#refine-col input[type=checkbox]');

$cols.add($cats).on('change', function (e) {
    var cats = $cats.filter(':checked').map(function(){
        return 'cat-' + (this.value || '')
    }).get();
    var cols = $cols.filter(':checked').map(function(){
        return 'col-' + (this.value || '')
    }).get();
    
    if(cats.length || cols.length){
        var $fitems = $items;
        if(cats.length){
            $fitems = $fitems.filter('.' + cats.join(', .'));
        }
        if(cols.length){
            $fitems = $fitems.filter('.' + cols.join(', .'));
        }
        
        $fitems.show();
        $items.not($fitems).hide();
    } else {
        $items.show();
    }
});