JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parentDiv">
<input type="checkbox" class="parent"/>
<div class="childGroup">
<input type="checkbox" class="child"/>
<input type="checkbox" class="child"/>
<input type="checkbox" class="child"/>
</div>
</div>

JavaScript

$('.child').on('change', function () {
   
    $parent = $(this).closest('.parentDiv').find('input.parent');
    $childCheckboxes = $(this).closest('.childGroup').find('.child');

    if ( $childCheckboxes.length === $childCheckboxes.filter(':checked').length ) {
        $parent.prop('checked', true);
    } else {
        $parent.prop('checked', false);
    }
    
    
    
});

$('.parent').on('change', function () {
   
    $children = $(this).closest('.parentDiv').find('.child');
    
    $children.prop('checked', $(this).is(':checked'));
    
});