JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mycategory" class="filter_acc_class uwpqsf_class togglecheck">
    	<h2 class="LabelPlaceHolder">Category</h2>

    <!-- Add controlall and data-boxid -->
    <label class="searchLabel control controlAll checkbox" data-boxid="wrap_id_cats">
        <input type="checkbox" class="chkcmfall" value="" name="mycatname[]" data-boxid="wrap_id_cats"><span class="control-indicator"></span>All</label>
    <div id="wrap_id_cats" class="wrap_acf togglecheck">
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="16" name="mycatname[]"><span class="control-indicator"></span>Bakery<span class="fltr_num">(12)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="18" name="mycatname[]"><span class="control-indicator"></span>Indulgences<span class="fltr_num">(12)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="17" name="mycatname[]"><span class="control-indicator"></span>Dairy<span class="fltr_num">(7)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="19" name="mycatname[]"><span class="control-indicator"></span>Meat<span class="fltr_num">(7)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="27" name="mycatname[]"><span class="control-indicator"></span>test4<span class="fltr_num">(7)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="24" name="mycatname[]"><span class="control-indicator"></span>test1<span class="fltr_num">(5)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="26" name="mycatname[]"><span...

JavaScript

$("input[type=checkbox]:not(.chkcmfall)").on("change", function () {
    if ($(".chkcmfall").is(":checked")) {
        $("input[type=checkbox]:not(this)").prop("checked", false);
        $(this).prop("checked", true);
    }

    $(".chkcmfall").prop("checked", $("input[type=checkbox]:not(.chkcmfall):checked").length == $("input[type=checkbox]:not(.chkcmfall)").length);
});

$(".chkcmfall").on("change", function () {
    $("input[type=checkbox]").prop("checked", $(this).is(":checked"));
});