JSFiddle - React, Tailwind, and code Playground

HTML

<div class="check">
    <label>
        <input type="checkbox" rel="A" name="A" />a</label>
    <label>
        <input type="checkbox" rel="B" name="B" />b</label>
    <label>
        <input type="checkbox" rel="C" name="C" />c</label>
    <label>
        <input type="checkbox" rel="D" name="D" />d</label>
    <button class="clear -filter" type="reset" value="Clear all">Clear all</button>
</div>
<div class="filter">
    <p class="textTrigger">Please choose</p>
</div>

JavaScript

$('button').on('click', function () {
        $('input:checkbox').removeAttr('checked');
        $('.results > div').show();
        $('.textTrigger').html('Please choose');
    });

$('div.check').delegate('input[type="checkbox"]', 'change', function(){
      var $lis = $('.results > div'),
      $checked = $('input:checked');

      var rels = [];
      $checked.each(function()
      {
            rels.push($(this).attr('name'));
      });
      $('.textTrigger').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();
      }
});