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);
    }
  });
});