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>

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');
    }

    $('.box').hide();
    if ($(".checkbox:checked").length > 0) {
        // any one is checked
        $.each($links, function (k, v) {
            $this = $(v);
            if ($this.hasClass('selected')) {
                anySelectedCheckbox = true;
                var cat = $this.data('categoryType');
                var nam = $this.data('categoryName');
                $('.box:has(div[data-category-type="' + cat + '"],div[data-category-name="+nam+"] )').show();
            }

        });
    } else {
        // none is checked
        $('.box').show();
    }
});