JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="checkbox" name="High" data-category-type="high">High
    <input type="checkbox" class="checkbox" name="low" data-category-type="low" > Low
          <input type="checkbox" class="checkbox" name="low" data-category-name="bread" > bread
         
<div class="wrap">
    <div class="grid grid--flexcells grid--gutters grid--1of2">        
        <div class="grid-cell">
	        <div class="box">
                <div id="categories" data-category-type="high" data-category-name="low">
                    <a href="#">
                    <div class="image"><img src="#"></div>
                    </a>
                </div>
            </div>
        </div>
         <div class="grid-cell">
	        <div class="box">
                 <div id="Categories" data-category-type="high" data-category-name="bread">
                    <a href="#">
                    <div class="image"><img src="#"></div>
                    </a>
                </div>
            </div>
        </div>
                <div class="grid-cell">
	        <div class="box">
                <div id="Categories" data-category-type="high" data-category-name="low">
                    <a href="#">
                    <div class="image"><img src="#"></div>
                    </a>
                </div>
            </div>
        </div>
                         <div class="grid-cell">
	        <div class="box">
                <div id="Categories" data-category-type="low" data-category-name="bread">
                    <a href="#">
                    <div class="image"><img src="#"></div>
                    </a>
                </div>
            </div>
        </div>
    </div>    
</div>

CSS

.wrap{width:80%; height:200px; border:1px solid #ccc;}
.grid { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.grid--1of2 > .grid-cell { flex: 0 0 50%; }
.image{width:100%; height:100px; border:1px solid #ff00ff}

JavaScript

$('.checkbox ').on('click', function (e) {
    
  
    var $this = $(this),
        $links = $('.checkbox');
    
    if ($this.hasClass('selected')) {
        $this.removeClass('selected');
    } else {
        $this.addClass('selected');
    }
    
 var selectedDivs = $('.box > categories > a > div').hide();
var anySelectedCheckbox = false;
$.each($links, function (k, v) {

    $this = $(v);

    if ($this.hasClass('selected')) {
        anySelectedCheckbox = true;
        var cat = $this.data('categoryType');
        var nam = $this.data('categoryName');
        selectedDivs = selectedDivs.filter('[data-category-type="'+cat+'"], [data-category-name="'+nam+'"]');
    }

});
selectedDivs.show();
    
    if(!anySelectedCheckbox) {
    $('.box > div').show();
    
    }
    
    
});