JSFiddle - React, Tailwind, and code Playground

by Raúl Rojas

HTML

<div id="CategoryContent">
     <h2 id="errorMessage">No results found, Please reset filter and search again</h2>

    <div class="product">Brand1</div>
    <div class="product">Brand2</div>
    <div class="product">Brand3</div>
    <div class="product">Brand4</div>
    <br>
    <br>
    <br>
    <br>
    <br>
     <h2>Brands:</h2>

    <input type="checkbox" name="brand" value="Brand1" />Brand1</br>
    <input type="checkbox" name="brand" value="Brand2" />Brand2</br>
    <input type="checkbox" name="brand" value="Brand3" />Brand3</br>
    <input type="checkbox" name="brand" value="Brand4" />Brand4</br>
</div>
</div>

CSS

#CategoryContent {
        width:920px;
        margin:auto;
    }
    .product {
        width:50px;
        height:50px;
        display:block;
        margin-bottom:10px;
        margin-right:10px;
        background:red;
        float:left;
    }
    #errorMessage {
        display: none;
    }

JavaScript

var $filters = $("input:checkbox[name='brand']").prop('checked', true), // start all checked
    $categoryContent = $('#CategoryContent div'),
    $errorMessage = $('#errorMessage');

$filters.click(function () {
    // if any of the checkboxes for brand are checked, you want to show div's containing their value, and you want to hide all the rest.
    $categoryContent.hide();
    var $selectedFilters = $filters.filter(':checked');
    if ($selectedFilters.length > 0) {
        $errorMessage.hide();
        $selectedFilters.each(function (i, el) {
            $categoryContent.filter(':contains(' + el.value + ')').show();
        });
    } else {
        $errorMessage.show();
    }

});