JSFiddle - React, Tailwind, and code Playground

HTML

<head>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<form>
    <label>
      <input type="checkbox" class="selected v" value="a1"/> a1 </label>
    
    <label>
      <input type="checkbox" class="selected a" value="a2" /> a2 </label>
    
    <label>
      <input type="checkbox" class="selected z" value="a3" /> a3 </label> <br>
   
   
   
   <div class="picpic" data-category="a1">
	
			 </div>
       
        <div class="picpic" data-category="a2">
	
			 </div>
       
       
        <div class="picpic" data-category="a3">
	
			 </div>
   
   
  </form>

CSS

.picpic{
  width:100px;
  height:100px;
  background:red;
  float:left;
  margin:50px;
}

JavaScript

var $filterCheckboxes = $('input[type="checkbox"]');

$filterCheckboxes.on('change', function() {

  var selectedFilters = {};

  $filterCheckboxes.filter(':checked').each(function() {

    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }

    selectedFilters[this.name].push(this.value);

  });

  
  var $filteredResults = $('.picpic');


  $.each(selectedFilters, function(name, filterValues) {


    $filteredResults = $filteredResults.filter(function() {

      var matched = false,
        currentFilterValues = $(this).data('category').split(' ');

      
      $.each(currentFilterValues, function(_, currentFilterValue) {

       

        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });

     
      return matched;

    });
  });
if($('input.selected').is(':checked')) {
$('.picpic').not($filteredResults).fadeOut(1000)
$($filteredResults).fadeIn(1000)()
} else {
    $('.picpic').fadeIn(1000)();
}
});