JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

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">
        <div class="hide" data-category-type="high" data-category-name="pizza">high</div>
        <div class="hide" data-category-type="low" data-category-name="pasta">low</div>
        <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
        <div class="hide" 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');
    }
    
    $('#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');
            $('#Categories > div[data-category-type="'+cat+'"]').show();
            $('#Categories > div[data-category-name="'+nam+'"]').show();
        }
    
    });
    
    if(!anySelectedCheckbox) {
    $('#Categories > div').show();
    
    }
    
    
});