Filter checkbox and Click

HTML

<div id="nav">
            <a rel="all"  id="all">All</a>
            <a rel="xtr1" id="xtr1">xtr1</a>
            <a rel="xtr2" id="xtr2">xtr2</a>
            <a rel="xtr3" id="xtr3">xtr3</a>
</div>

<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="xtr3 all item cat-3 col-1">col 1 - cat 3 - xtra 3</li>
    <li class="xtr1 all item cat-3 col-1">col 1 - cat 3 - xtra 1</li>
    <li class="xtr1 all item cat-3 col-1">col 1 - cat 3 - xtra 1</li>
    <li class="xtr3 all item cat-1 col-1">col 1 - cat 1 - xtra 3</li>
    <li class="xtr1 all item cat-1 col-2">col 2 - cat 1 - xtra 1</li>
    <li class="xtr2 all item cat-2 col-1">col 1 - cat 2 - xtra 2</li>
    <li class="xtr1 all item cat-2 col-2">col 2 - cat 2 - xtra 1</li>
    <li class="xtr2 all item cat-2 col-3">col 3 - cat 2 - xtra 2</li>
    <li class="xtr1 all item cat-2 col-4">col 4 - cat 2 - xtra 1</li>
    <li class="xtr3 all item cat-3 col-2">col 2 - cat 3 - xtra 3</li>
    <li class="xtr1 all item cat-3 col-2">col 2 - cat 3 - xtra 1</li>
    <li class="xtr3 all item cat-3 col-2">col 2 - cat 3 - xtra 3</li>
    <li class="xtr1 all item cat-1 col-2">col 2 - cat 1 - xtra 1</li>
    <li class="xtr3 all item cat-1 col-1">col 1 - cat 1 - xtra 3</li>
    <li class="xtr1 all item cat-2 col-4">col 4 - cat 2 - xtra 1</li>
    <li class="xtr1 all item cat-2 col-3">col 3 - cat 2 - xtra 1</li>
    <li class="xtr2 all item cat-2 col-3">col 3 - cat 2 - xtra 2</li>
    <li class="xtr2 all item cat-2 col-3">col 3 - cat 2...

CSS

ul, #refine-cat, #refine-col {
    float:left;
    width:100%
}
.current {
    color:red;
}
    
#nav a {
    border: 1px solid #000000;
    float: left;
    margin: 10px;
    padding: 10px;
}

JavaScript

jQuery("#nav a").on("click", function (event) {
        jQuery("#nav a").removeClass("current");
        jQuery(this).addClass("current").attr("rel");
        updateResult();
    });


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(){

    updateResult();
    
});

function updateResult(){
   $('ul > li').hide(); 
    var consArray = [];
   consArray = consArray.concat($('#nav > a.current').map(function(){return this.rel}).get());
    consArray = consArray.concat($cats.filter(':checked').map(function(){return 'cat-' + this.value}).get());
    consArray = consArray.concat($cols.filter(':checked').map(function(){return 'col-' + this.value}).get());
    debugger;
    $('.'  + consArray.join('.')).show();
}