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>
   
    <div id="Categories">
        <a href="#" class="linkkk"><div class="hide" data-category-type="high" data-category-name="pizza">high</div></a>
        <a href="#"><div class="hide" data-category-type="low" data-category-name="pasta">low</div></a>
        <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
        <div data-category-type="high" data-category-name="bread">bread</div>
    </div>

CSS

.selected {
    color: #000;
}

JavaScript

$('.checkbox ').on('click', function (e) {
    
   

    var $this = $(this),
        $links = $('.checkbox');
    
    if ($this.hasClass('selected')) {
        $this.removeClass('selected');
    } else {
        $this.addClass('selected');
    }
    
 var selectedDivs = $('#Categories > 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) {
    $('#Categories > div').show();
    
    }
    
    
});