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[type=checkbox]', 'change', function()
{
    var $lis = $('.results > li'),
        $checked = $('input:checked');

    if ($checked.length)
    {
        var selector = $checked.map(function ()
        {
            return '.' + $(this).attr('rel');
        }).get().join('');
    
        $lis.hide().filter(selector).show();     
    }
    else
    {
        $lis.show();
    }
});