Выберите флажки, чтобы получить результат, соответствующий всем выборам

Question

У меня есть 3 флажка, которые переключаются между результатами. Он работает так же, как если бы я хотел бы иметь возможность фильтровать с несколькими флажками одновременно.

Например, если отмечены high и bread, он должен отображать только один результат, так как это соответствует только одному из divs. На данный момент он отображает что-либо с high или bread.

https://jsfiddle.net/f7srx0dd/12/

<input type="checkbox" class="checkbox" name="High" data-category-type="high">High 
<input type="checkbox" class="checkbox" name="low" data-category-type="low" > 
<input type="checkbox" class="checkbox" name="low" data-category-name="bread" > 

<div id="Categories"> 
    <div class="hide" data-category-type="high" data-category-name="pizza">high</div> 
    <div class="hide" data-category-type="low" data-category-name="pasta">low</div> 
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div> 
    <div class="hide" data-category-type="high" data-category-name="bread">bread</div> 
</div> 

$('.checkbox ').on('click', function (e) { 



var $this = $(this), 
    $links = $('.checkbox'); 

if ($this.hasClass('selected')) { 
    $this.removeClass('selected'); 
} else { 
    $this.addClass('selected'); 
} 

$('#Categories > div').hide(); 
var anySelectedCheckbox = false; 
$.each($links, function (k, v) { 

    $this = $(v); 

    if ($this.hasClass('selected')) { 
     anySelectedCheckbox = true; 
     var cat = $this.data('categoryType'); 
     var nam = $this.data('categoryName'); 
     $('#Categories > div[data-category-type="'+cat+'"]').show(); 
     $('#Categories > div[data-category-name="'+nam+'"]').show(); 
    } 

}); 

if(!anySelectedCheckbox) { 
$('#Categories > div').show(); 

} 


}); 

Answer 1

Я хотел бы сделать это, держа работающий фильтр, какие из них соответствовал флажков. Начните с выбора всех результатов в качестве объекта jQuery. Затем для каждого флажка фильтруйте объект jQuery только для соответствия конкретным:

var selectedDivs = $('#Categories > div').hide(); 
var anySelectedCheckbox = false; 
$.each($links, function (k, v) { 

    $this = $(v); 

    if ($this.hasClass('selected')) { 
     anySelectedCheckbox = true; 
     var cat = $this.data('categoryType'); 
     var nam = $this.data('categoryName'); 
     selectedDivs = selectedDivs.filter('[data-category-type="'+cat+'"], [data-category-name="'+nam+'"]'); 
    } 

}); 
selectedDivs.show();