JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="checkbox" id="select_all">
    <label for="select_all">Select all</label>
</div>

<ul>
    <li>
        <input type="checkbox" id="one" class="select_one">
        <label for="one">One</label>
    </li>
    <li>
        <input type="checkbox" id="two" class="select_one">
        <label for="two">Two</label>
    </li>
    <li>
        <input type="checkbox" id="three" class="select_one">
        <label for="three">Three</label>
    </li>
</ul>

JavaScript

$(function () {
    $('#select_all').change (function () {
        $('.select_one').prop('checked', $(this).prop('checked'));
    });
    
    $('.select_one').change (function () {
        if ($('.select_one:checked').length === 0) {
            $('#select_all').
                prop("indeterminate", false).
                prop('checked', false);
        } else if ($('.select_one:not(:checked)').length === 0) {
            $('#select_all').
                prop("indeterminate", false).
                prop('checked', true);
        } else {
            $('#select_all').
                prop("indeterminate", true);
        }
    });     
});