JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" value="1" class="user_name">Main1
<br>
<br>
<br>
<input type="checkbox" value="2" class="user_name">sub-2
<br>
<input type="checkbox" value="3" class="user_name">sub-3
<br>
<input type="checkbox" value="4" class="user_name">sub-4
<br>

JavaScript

$('.user_name').change(function () {
    var $checkbox = $(this);
    var $siblings = $checkbox.siblings('.user_name');

    if ($checkbox.is(':first-child')) {
        $siblings.prop('checked', $checkbox.prop('checked'));
    } else {
        $siblings.first().prop('checked', $siblings.not(':first-child').length == $siblings.filter(':checked').length);
    }
});