JSFiddle - React, Tailwind, and code Playground
HTML
<div class="checkedItem">checked item will go here once clicked</div>
<div class="container btn-group tags" data-toggle="buttons">
<button onclick="$('input:checkbox').removeAttr('checked');$('.results > div').show();$('.checkedItem').html('');">Clear All</button>
<label class="btn btn-primary active" id="myBtn">
<input type="checkbox" rel="arts" /> Arts
</label>
<label class="btn btn-primary" id="myBtn">
<input type="checkbox" rel="computers" /> Computers
</label>
<label class="btn btn-primary" id="myBtn">
<input type="checkbox" rel="health" /> Health
</label>
<label class="btn btn-primary" id="myBtn">
<input type="checkbox" rel="video-games" /> Video Games
</label>
</div>
<div class="container">
<div class="results">
<div class="container arts computers">
Result 1
</div>
<div class="container video-games">
Result 2
</div>
<div class="container computers health video-games">
Result 3
</div>
<div class="container arts video-games">
Result 4
</div>
</div>
</div>
JavaScript
$('div.tags').delegate('input[type=checkbox]', 'change', function()
{
var $lis = $('.results > div'),
$checked = $('input:checked');
var rels = [];
$checked.each(function()
{
rels.push($(this).attr('rel'));
});
$('.checkedItem').html(rels.join(', '));
if ($checked.length)
{
var selector = $checked.map(function ()
{
return '.' + $(this).attr('rel');
}).get().join('');
$lis.hide().filter(selector).show();
}
else
{
$lis.show();
}
});