使用jQuery和链接进行多个复选框过滤

Question

这是我尝试制作的内容。按公司（例如Best Buy或BandH）等导航工具过滤。到目前为止，我有设计，但我不知道如何使其功能。

我想要它做的是当有人点击多个复选框时，它应该缩小产品的结果。示例：如果您检查品牌类别中的两个框（例如product1和product2，那么它将显示结果中的两个品牌。我想使用jQuery。这是我尝试的一个示例我希望它能像下面的jquery一样运行，但结果就是产品。

这就是我迄今为止的目标

JSFiddle

$(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 > 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 === '' && nselector === '') {         
                $('.flowers > div').filter(selector).show();
            } else if (cselector === '') {
                $('.flowers > div').filter(selector).filter(nselector).show();
            } else if (nselector === '') {
                $('.flowers > div').filter(selector).filter(cselector).show();
            } else {
                $('.flowers > 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 > 1 && arr.length) {
            what = a[--L];
            while ((ax= arr.indexOf(what)) !== -1) {
                arr.splice(ax, 1);
            }
        }
        return arr;
    }

});