Jquery Filter Unordered List By Class Name Onchange

I have a large list of results which I want to filter out with a checkbox. so for example when you click on cat 3 you should see all items with the class cat3 and if you click cat

Solution 1:

Try

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();
    }
});

Demo: Fiddle

Solution 2:

It looks like you need to loop through each checkbox and ensure that no other checkboxes are marked as check before you do jQuery('.item').hide();.

 if (jT.is(':checked')) {
        jQuery('.item').hide(); //--- Here, you are not taking into consideration that some .item(s) may need to remain shown if their respective checkbox is checked.jQuery('.col-' + val).show();