LeeTee LeeTee - 11 months ago 52
CSS Question

JQuery filter checkboxes to show / hide elements

I have the below code which filters elements by hiding them in JQuery using the styles on the elements. See my JSFiddle(https://jsfiddle.net/vy41zwch/4/).

My issue is that it I need it to show only elements that have ALL the checked filters listed in the styles and not show ANY of checked elements.

For example, if I select, "red" and "Coat" It should show only BOX A as that contains both filters. Instead it shows BOXs A & B.

//filter files list
function filterFilesList() {
var rows = $('.file-row');
var checked = $("#filterControls :checkbox:checked");
$("." + $(this).val()).show(200);
} else {

$("#filterControls :checkbox").click(filterFilesList);

Answer Source

You need to create the selector which is combination of all the filters

var selector = checked.map(function() {
    return "." + $(this).val()