Multiple checkbox filtering with jQuery and links
<p>Here's what I'm trying make. Filter by navigation work like companies (e.g. Best Buy or BandH). So far I have the design but I don't know how to make it functional.    </p>

<p>What I want it to do is when somebody click on multiple checkboxes, it should narrow the results of the products. Example: if you check two boxes in the brand category (e.g. product1 and product2, then it would show the 2 brands in result. I would like to use jQuery. Here's an example of what I'm trying to do. I want it to function something like the jquery below but with products as a result.</p>

<p><img src="https://i.stack.imgur.com/g44Ee.png" alt="what I&#39;m trying to do"></p>

<p>This what I have so Far</p>

<p><a href="https://jsfiddle.net/qsmbfLfg/" rel="nofollow noreferrer">JSFiddle</a></p>

<pre><code>$(document).ready(function() {

var byProperty = [], byColor = [], byLocation = [];

$("input[name=fl-colour]").on( "change", function() {
    if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});

$("input[name=fl-size]").on( "change", function() {
    if (this.checked) byColor.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byColor, "[data-category~='" + $(this).attr("value") + "']");
});

$("input[name=fl-cont]").on( "change", function() {
    if (this.checked) byLocation.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byLocation, "[data-category~='" + $(this).attr("value") + "']");
});

$("input").on( "change", function() {
    var str = "Include items \n";
    var selector = '', cselector = '', nselector = '';

    var $lis = $('.flowers &gt; div'),
        $checked = $('input:checked');  

    if ($checked.length) {  

        if (byProperty.length) {        
            if (str == "Include items \n") {
                str += "    " + "with (" +  byProperty.join(',') + ")\n";               
                $($('input[name=fl-colour]:checked')).each(function(index, byProperty){
                    if(selector === '') {
                        selector += "[data-category~='" + byProperty.id + "']";                     
                    } else {
                        selector += ",[data-category~='" + byProperty.id + "']";    
                    }                
                });                 
            } else {
                str += "    AND " + "with (" +  byProperty.join(' OR ') + ")\n";                
                $($('input[name=fl-size]:checked')).each(function(index, byProperty){
                    selector += "[data-category~='" + byProperty.id + "']";
                });
            }                           
        }

        if (byColor.length) {                       
            if (str == "Include items \n") {
                str += "    " + "with (" +  byColor.join(' OR ') + ")\n";                   
                $($('input[name=fl-size]:checked')).each(function(index, byColor){
                    if(selector === '') {
                        selector += "[data-category~='" + byColor.id + "']";                    
                    } else {
                        selector += ",[data-category~='" + byColor.id + "']";   
                    }                
                });                 
            } else {
                str += "    AND " + "with (" +  byColor.join(' OR ') + ")\n";               
                $($('input[name=fl-size]:checked')).each(function(index, byColor){
                    if(cselector === '') {
                        cselector += "[data-category~='" + byColor.id + "']";                   
                    } else {
                        cselector += ",[data-category~='" + byColor.id + "']";  
                    }                   
                });
            }           
        }

        if (byLocation.length) {            
            if (str == "Include items \n") {
                str += "    " + "with (" +  byLocation.join(' OR ') + ")\n";                
                $($('input[name=fl-cont]:checked')).each(function(index, byLocation){
                    if(selector === '') {
                        selector += "[data-category~='" + byLocation.id + "']";
                        } else {
                            selector += ",[data-category~='" + byLocation.id + "']";    
                        }                
                    });             
                } else {
                    str += "    AND " + "with (" +  byLocation.join(' OR ') + ")\n";                
                    $($('input[name=fl-cont]:checked')).each(function(index, byLocation){
                        if(nselector === '') {
                            nselector += "[data-category~='" + byLocation.id + "']";                    
                        } else {
                            nselector += ",[data-category~='" + byLocation.id + "']";   
                        }   
                    });
                }            
            }

            $lis.hide(); 
            console.log(selector);
            console.log(cselector);
            console.log(nselector);

            if (cselector === '' &amp;&amp; nselector === '') {         
                $('.flowers &gt; div').filter(selector).show();
            } else if (cselector === '') {
                $('.flowers &gt; div').filter(selector).filter(nselector).show();
            } else if (nselector === '') {
                $('.flowers &gt; div').filter(selector).filter(cselector).show();
            } else {
                $('.flowers &gt; div').filter(selector).filter(cselector).filter(nselector).show();
            }

        } else {
            $lis.show();
        }   

        $("#result").html(str); 

    });

    function removeA(arr) {
        var what, a = arguments, L = a.length, ax;
        while (L &gt; 1 &amp;&amp; arr.length) {
            what = a[--L];
            while ((ax= arr.indexOf(what)) !== -1) {
                arr.splice(ax, 1);
            }
        }
        return arr;
    }

});
</code></pre>