JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="control unstyled product_cat_list">
<li id="product_cat-51"><input value="51" type="checkbox" name="product_cat[]" id="in-product_cat-51"> <label class="selectit">Accesorios</label><ul class="children">
<li id="product_cat-52"><input value="52" type="checkbox" name="product_cat[]" id="in-product_cat-52"> <label class="selectit">Abanicos</label></li>
<li id="product_cat-53"><input value="53" type="checkbox" name="product_cat[]" id="in-product_cat-53"> <label class="selectit">Bandoleras y riñoneras</label></li>
<li id="product_cat-246"><input value="246" type="checkbox" name="product_cat[]" id="in-product_cat-246"> <label class="selectit">Billeteras</label></li>
<li id="product_cat-205"><input value="205" type="checkbox" name="product_cat[]" id="in-product_cat-205"> <label class="selectit">Botones, pins</label></li>
<li id="product_cat-54"><input value="54" type="checkbox" name="product_cat[]" id="in-product_cat-54"> <label class="selectit">Bufandas</label></li>
<li id="product_cat-342"><input value="342" type="checkbox" name="product_cat[]" id="in-product_cat-342"> <label class="selectit">Cartucheras</label></li>
<li id="product_cat-55"><input value="55" type="checkbox" name="product_cat[]" id="in-product_cat-55"> <label class="selectit">Chales y ponchos</label></li>
<li id="product_cat-56"><input value="56" type="checkbox" name="product_cat[]" id="in-product_cat-56"> <label class="selectit">Cinturones</label> <ul class="children">
<li id="product_cat-69"><input value="69" type="checkbox" name="product_cat[]" id="in-product_cat-69"> <label class="selectit">Cinturones de hombre</label></li>
<li id="product_cat-70"><input value="70" type="checkbox" name="product_cat[]" id="in-product_cat-70"> <label class="selectit">Cinturones de mujer</label></li>
<li id="product_cat-71"><input value="71" type="checkbox" name="product_cat[]" id="in-product_cat-71"> <label class="selectit">Cinturones...
JavaScript
$('ul.product_cat_list').find('input[type=checkbox]').each(function(index, input) {
$(input).bind('change', function() {
var checkbox = $(this);
var is_checked = $(checkbox).is(':checked');
if(is_checked) {
$(checkbox).parents('li').children('input').attr('checked', 'checked');
} else {
$(checkbox).parentsUntil('ul').find('input').removeAttr('checked');
}
});
});