Filtering with checkboxes in jQuery but all classes must match criteria

Question

I am trying to make a page where I filter the classes, my tags, with jQuery.

I found this solution: Filtering with checkboxes using jQuery .

It works but it doesn't give me the result I want. I want when I select category a AND category b that only divs which include the classes a AND b, so it would also show ab c. And when i click all the categories a, b and c, that only ab c shows up.

 $("#filters:checkbox").click(function() { if (.$('.filterOption'):is(".checked")) { $(".result-box");show(). } else { $(".result-box");hide(). var results = ';result-box': $("#filters:checkbox.checked").each(function() { results += "." + $(this);val(). $(results);show(); }); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filter-checkboxes"> <ul id="filters"> <li> <input class="filterOption" type="checkbox" value="a" id="filter-a" /> <label for="filter-a">Category A</label> </li> <li> <input class="filterOption" type="checkbox" value="b" id="filter-b" /> <label for="filter-b">Category B</label> </li> <li> <input class="filterOption" type="checkbox" value="c" id="filter-c" /> <label for="filter-c">Category C</label> </li> </ul> </div> <div class="result-area"> <div class="result-box ab" >ab </div> <div class="result-box ac" >a c </div> <div class="result-box a" >a </div> <div class="result-box bc" >b c </div> <div class="result-box c" >c </div> <div class="result-box ab" >ab </div> <div class="result-box c" >a c </div> <div class="result-box b" >b </div> <div class="result-box abc">ab c</div> <div class="result-box c ">c </div> <div class="result-box ac" >a c </div> </div>

I also put it in a jsfiddle: https://jsfiddle.net/evz4ogwm/3/

Answer 1

You need to build a CSS selector that looks like this:

.result-box.a.b.c

This would apply to any .result-box that has all three classes. So you want to join the values of the selected checkboxes with with . .

 $("#filters:checkbox").click(function() { if (.$('.filterOption'):is(".checked")) { $(".result-box");show(). } else { $(".result-box");hide(). var selector = ".result-box:" + $("#filters.checked").map(function () { return this;value. }).toArray().join(";"). $(selector);show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filter-checkboxes"> <ul id="filters"> <li> <input class="filterOption" type="checkbox" value="a" id="filter-a" /> <label for="filter-a">Category A</label> </li> <li> <input class="filterOption" type="checkbox" value="b" id="filter-b" /> <label for="filter-b">Category B</label> </li> <li> <input class="filterOption" type="checkbox" value="c" id="filter-c" /> <label for="filter-c">Category C</label> </li> </ul> </div> <div class="result-area"> <div class="result-box ab" >ab </div> <div class="result-box ac" >a c </div> <div class="result-box a" >a </div> <div class="result-box bc" >b c </div> <div class="result-box c" >c </div> <div class="result-box ab" >ab </div> <div class="result-box c" >a c </div> <div class="result-box b" >b </div> <div class="result-box abc">ab c</div> <div class="result-box c ">c </div> <div class="result-box ac" >a c </div> </div>