JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tags">
<label><input type="checkbox" data-category="arts" /> Arts </label>
<label><input type="checkbox" data-category="computers" /> Computers </label>
<label><input type="checkbox" data-category="health" /> Health </label>
<label><input type="checkbox" data-category="video-games" /> Video Games </label>
</div>
<ul class="results">
<li data-category="arts computers">
Result 1
</li>
<li data-category="video-games">
Result 2
</li>
<li data-category="computers health video-games">
Result 3
</li>
<li data-category="arts video-games">
Result 4
</li>
</ul>
JavaScript
$('div.tags').delegate('input:checkbox', 'change', function() {
$('.results > li').hide();
var selector = $('input:checked').map(function() {
return $(this).attr('data-category');
}).get();
console.log(selector);
function filterCategories(elem) {
var elemCats = elem.attr('data-category');
if (elemCats) {
elemCats = elemCats.split(' ');
} else {
elemCats = Array();
}
for (var i = 0; i < selector.length; i++) {
console.log("testing " + selector[i] + " in:");
console.log(elemCats);
if (jQuery.inArray(selector[i], elemCats) != -1) {
console.log('false');
return false;
}
}
console.log('true');
return true;
}
$('.results > li').each(function(i, elem) {
if (filterCategories(jQuery(elem))) {
$(elem).show();
}
});
}).find('input:checkbox').change();