JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<div class="tags">
    <label><input type="checkbox" rel="arts" /> Arts </label>
    <label><input type="checkbox" rel="computers" /> Computers </label>
    <label><input type="checkbox" rel="health" /> Health </label>
    <label><input type="checkbox" rel="video-games" /> Video Games </label>
</div>

<ul class="results">
    <li class="arts computers">
        Result 1
    </li>
    <li class="video-games">
        Result 2
    </li>
    <li class="computers health video-games">
        Result 3
    </li>
    <li class="arts video-games">
        Result 4
    </li>
</ul>

JavaScript

$('div.tags').delegate('input:checkbox', 'change', function()
{
     var $lis = $('.results > li').hide();
     //For each one checked
     $('input:checked').each(function()
     {
          $lis.filter('.' + $(this).attr('rel')).show();
     });      
}).find('input:checkbox').change();