JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="checkbox" id="select_all">
</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_one').change (function () {
        if ($('.select_one:checked').length === 0) {
            $('#select_all').
                prop("indeterminate", false).
                attr('checked', false);
        } else if ($('.select_one:not(:checked)').length === 0) {
            $('#select_all').
                prop("indeterminate", false).
                attr('checked', true);
    });     
});