JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="filters">
    <li><input type="checkbox" checked="checked" value="categorya" id="filter-categorya" /><label for="filter-categorya">Category A</label></li>
    <li><input type="checkbox" checked="checked" value="categoryb" id="filter-categoryb" /><label for="filter-categoryb">Category B</label></li>
</ul>

<div class="categorya"></div>
<div class="categorya"></div>
<div class="categorya"></div>
<div class="categorya"></div>
<div class="categoryb"></div>
<div class="categoryb"></div>
<div class="categoryb"></div>

CSS

.categorya, .categoryb {
    width: 150px;
    height: 150px;
    background: red;
    margin: 10px;
    float: left;
}

.categoryb {
    background: blue;
}

JavaScript

$("#filter-categorya").change(function(){
    if (!$(this).attr("checked")) {
        $('.categorya').stop().fadeTo('slow', 0.2);
        $('#filter-categorya').removeAttr('checked');
        return;
    } 
    
    $('.categorya').stop().fadeTo('slow', 1.0);
    $('#filter-categorya').attr('checked', 'checked');
});

$("#filter-categoryb").change(function() {
    if (!$(this).attr("checked")) {
        $('.categoryb').stop().fadeTo('slow', 0.2);
        $('#filter-categoryb').removeAttr('checked');
        return;
    }
    $('.categoryb').stop().fadeTo('slow', 1.0);
    $('#filter-categoryb').attr('checked', 'checked');
});