JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><input type="checkbox" id="input1"><label for="input1">category 1</label>
    <ul>
    <li><input type="checkbox" id="input11"><label for="input11">category 11</label></li>
    <li><input type="checkbox" id="input12"><label for="input12">category 12</label></li>
    <li><input type="checkbox" id="input13"><label for="input13">category 13</label></li>
    </ul>
</li>
<li><input type="checkbox" id="input2"><label for="input2">category 2</label></li>
<li><input type="checkbox" id="input3"><label for="input3">category 3</label>
<ul>
    <li><input type="checkbox" id="input31"><label for="input31">category 31</label></li>
    <li><input type="checkbox" id="input32"><label for="input32">category 32</label></li>
    <li><input type="checkbox" id="input33"><label for="input33">category 33</label>
            <ul>
            <li><input type="checkbox" id="input331"><label for="input331">category 331</label></li>
            <li><input type="checkbox" id="input332"><label for="input332">category 332</label></li>
            <li><input type="checkbox" id="input333"><label for="input333">category 333</label></li>
            </ul>
    </li>
</ul>
</li>
</ul>

CSS

ul { margin-left:30px; }

JavaScript

$("ul input:checkbox").change(function(){
    
    if ($(this).is(':checked')) {
        // deti
        $(this).parent().find("input:checkbox").attr('checked', 'checked');
    }
    else {
        // deti
        $(this).parent().find("input:checkbox").removeAttr('checked');
        // rodice
        $(this).parents('li').each(function(){
            $(this).children('input:checkbox').removeAttr('checked');
        });
    }
});