JSFiddle - React, Tailwind, and code Playground

by Ajsa Ferguson

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();

    }


});