JSFiddle - React, Tailwind, and code Playground

HTML

<form id="orderStatusFilters">
  <div id="filterStatusAll">
    all <input type="checkbox" id="orderStatusAll" />
  </div>
  <div id="filterStatusOther">
    <div>
      open <input type="checkbox" id="orderStatusOpen" />
    </div>
    <div>
      completed <input type="checkbox" id="orderStatusCompleted" />
    </div>
    <div>
      reactivated <input type="checkbox" id="orderStatusReactivated" />
    </div>
    <div>
      cancelled <input type="checkbox" id="orderStatusCanceled" />
    </div>
  </div>
  <div id="tempConsole"></div>
</form>

JavaScript

jQuery(function($) {
        var tempConsole = $('#tempConsole');
        // all checkbox 
        var all_checkbox = $('#orderStatusAll');
        // 'other' checkboxes
        var open_checkbox = $('#orderStatusOpen');
        var complete_checkbox = $('#orderStatusCompleted');
        var reactivated_checkbox = $('#orderStatusReactivated');
        var canceled_checkbox = $('#orderStatusCanceled');
        var status_filter_form = $('#orderStatusFilters');
        var all_status_filters = status_filter_form.find('input[type="checkbox"]');
        var filter_status_all = $('#filterStatusAll').find('input[type="checkbox"]');
        var filter_status_other = $('#filterStatusOther').find('input[type="checkbox"]');
    
        all_status_filters.on('change', function() {
           if ($(this).attr('id') === 'orderStatusAll' ) {
               if (filter_status_other.not(':checked').length === filter_status_other.length) {
                   $(this).prop('checked', true);
                   // more code
               }
               else {
                   filter_status_other.each(function() {
                       $(this).prop('checked', false);        
                       // mode code
                   });
               } 
               // more code
           } else if (filter_status_other.not(':checked').length === filter_status_other.length) {
               all_checkbox.prop('checked', true);
               // more code
           } else {
               all_checkbox.prop('checked', false);
               // more code
           }
        });
    });