This tutorial explains in detail how to use jQuery to implement the all and anti-select functions of check boxes in multiple regions. Automatically synchronize the selected status of all sub-check boxes in that area by setting the Select All checkbox for each independent area and listening for its status changes. At the same time, it also covers how to dynamically update the status of the "Select All" check box when the status of any sub-check box in the area changes to ensure the integrity and consistency of the user interface logic.

Core concepts and HTML structure optimization

In complex forms or data display scenarios, we often need to perform "select all" or "select all" operations on a set of check boxes. When there are multiple independent checkbox groups on the page, each group needs to have its own "select all" function and does not affect each other. The core of implementing this function is:

1. Definite area boundaries : define a common parent container for each independent checkbox group and give it a unique identity or class name so that jQuery accurately defines the operating range.
2. Identify the Select All check box : Assign a specific class name to the Select All check box within each group so that it is easy to identify by the selector.

Based on the above principles, we optimize the original HTML structure, introduce the myDiv class to identify independent check box groups, and introduce the selectAll class to identify the "Select All" check box.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="actions" id="actions" title="Actions">
   <!-- First checkbox group-->
   <div class="myDiv">
       <div>
<input type="checkbox" name="action" id="" class="selectAll" value="0"> Select All</div>
<br>
       <div>
<input type="checkbox" name="action" id="" class="" value="1"> Item 1</div>
<br>
       <div>
<input type="checkbox" name="action" id="" class="" value="2"> Item 2</div>
<br>
       <div>
<input type="checkbox" name="action" id="" class="" value="3"> Item 3</div>
<br>
   </div>

   <!-- Second checkbox group-->
   <div class="myDiv">
       <div>
<input type="checkbox" name="action" id="" class="selectAll" value="26">Select All</div>
<br>
       <div>
<input type="checkbox" name="action" id="" class="" value="27"> Item 27</div>
<br>
       <div>
<input type="checkbox" name="action" id="" class="" value="28"> Item 28</div>
<br>
       <div>
<input type="checkbox" name="action" id="" class="" value="29"> Item 29</div>
<br>
       <div>
<input type="checkbox" name="action" id="" class="" value="30"> Item 30</div>
<br>
       <div>
<input type="checkbox" name="action" id="" class="" value="31"> Item 31</div>
   </div>
</div>

In the above code, we wrap each independent checkbox group with myDiv class and add the selectAll class on the "Select All" checkbox for each group.

jQuery implementation logic

Next, we will use jQuery to write two main event handlers, respectively, handling click events for the "Select All" checkbox and the normal checkbox.

1. Control of the “Select All/No Select All” check box

When the user clicks the "Select All" check box, we need to synchronize the selected status of all other check boxes in the same group according to their current selected status.

 $('.selectAll').on('click', function() {
  // Get the selected status of the current "Select All" check box let isSelected = $(this).is(':checked');

  // Find the nearest parent .myDiv element upwards, and then find all checkboxes inside it $(this).parents('.myDiv').find('input[type="checkbox"]').each(function() {
    // Set the selected status of all check boxes in the same group consistent with the "Select All" check box $(this).prop('checked', isSelected);
  });
});

explain:

• $('.selectAll').on('click', function(){...}): Listen to all click events with checkboxes of the selectAll class.
• $(this).is(':checked'): Gets the selected status (true or false) of the currently clicked "Select All" check box.
• $(this).parents('.myDiv'): traverse the DOM tree up from the currently clicked "Select All" check box to find the nearest parent myDiv element. This ensures that the operation is limited to only the group where the current check box resides.
• .find('input[type="checkbox"]'): Inside the found myDiv, find all elements of input type checkbox, including the "Select All" checkbox itself.
• .each(function(){...}): Iterates through all found check boxes.
• $(this).prop('checked', isSelected): Sets the checked property of each checkbox so that it is consistent with the isSelected state.

2. Linkage control of ordinary check boxes

When the user clicks on any ordinary check box in the group, we need to dynamically update the status of the "Select All" check box based on the selected status of all ordinary check boxes in the group. The specific logic is: if all normal check boxes are selected, the "Select All" check box should also be selected; otherwise, if the "Select All" check box was originally selected, it should be unchecked.

 $('input:not(".selectAll")').on('click', function() {
  // Get the parent.myDiv element where the current check box is located. $parentDiv = $(this).parents('.myDiv');
  // Get the "Select All" check box in this group let $selectAllCheckbox = $parentDiv.find('.selectAll');

  // Statistics the number of all check boxes in this group except the "Select All" check box let totalCheckboxes = $parentDiv.find('input:not(".selectAll")').length;
  // Statistics the number of check boxes selected in this group except for the "Select All" checkbox let checkedCheckboxes = $parentDiv.find('input:checked:not(".selectAll")').length;

  // If all normal check boxes are selected, select the "Select All" check box if (totalCheckboxes === checkedCheckboxes) {
    $selectAllCheckbox.prop('checked', true);
  } else {
    // Otherwise, uncheck the "Select All" check box $selectAllCheckbox.prop('checked', false);
  }
});

explain:

• $('input:not(".selectAll")').on('click', function(){...}): Listen to all click events that do not have the selectAll class checkbox.
• let $parentDiv = $(this).parents('.myDiv');: Get the myDiv parent element where the normal checkbox you are currently clicking is located.
• let $selectAllCheckbox = $parentDiv.find('.selectAll');: Find the corresponding "Select All" check box inside this myDiv.
• $parentDiv.find('input:not(".selectAll")').length: counts the total number of all non-Select All check boxes in the current group.
• $parentDiv.find('input:checked:not(".selectAll")').length: Counts the number of non-Select All check boxes in the current group.
• By comparing totalCheckboxes and checkedCheckboxes, determine whether all normal check boxes are selected and update the selected status of $selectAllCheckbox accordingly.

Complete jQuery code example

Integrate the two logics above together and make sure to execute after the DOM loads:

 $(document).ready(function() {
    // 1. Control logic of the "Select All/No Select All" check box $('.selectAll').on('click', function() {
        let isSelected = $(this).is(':checked');
        $(this).parents('.myDiv').find('input[type="checkbox"]').prop('checked', isSelected);
    });

    // 2. The linkage control logic of the normal check box $('input:not(".selectAll")').on('click', function() {
        let $parentDiv = $(this).parents('.myDiv');
        let $selectAllCheckbox = $parentDiv.find('.selectAll');

        let totalCheckboxes = $parentDiv.find('input:not(".selectAll")').length;
        let checkedCheckboxes = $parentDiv.find('input:checked:not(".selectAll")').length;

        // If all normal check boxes are selected, select the "Select All" check box if (totalCheckboxes === checkedCheckboxes) {
            $selectAllCheckbox.prop('checked', true);
        } else {
            // Otherwise, uncheck the "Select All" check box $selectAllCheckbox.prop('checked', false);
        }
    });
});

Notes and best practices

• Selector accuracy : Using a combination of .parents('.myDiv') and .find() is the key to ensuring that the operation is limited to the current group. Avoid using global selectors to prevent logical confusion between different groups.
• Event Delegation : For dynamically loaded check boxes, direct binding of click events may be invalid. In this case, it is recommended to use event delegates to bind events to parent elements:

   $(document).on('click', '.selectAll', function() { /* ... */ });
  $(document).on('click', 'input:not(".selectAll")', function() { /* ... */ });

  This will make the event listener work properly even after the element is dynamically added to the DOM.

• Initial state handling : If some check boxes are already selected when the page is loading, you may need to perform a check in $(document).ready() to make sure the initial state of the "Select All" check box is correct. For example, you can manually trigger a normal checkbox click event (although this may not be the most elegant way) or write an initialization function to check and set.
• User Experience : Consider the behavior of the "Select All" checkbox when all sub-check boxes are disabled. Normally, if all children are not selected, the Select All check box should also be disabled or hidden.
• Performance Considerations : For complex pages with a large number of check boxes, frequent DOM operations may affect performance. However, for most common scenarios, the above approach is already efficient enough. If you encounter performance bottlenecks, you can consider using a virtual DOM library or a finer DOM operation optimization.

Summarize

Through this tutorial, we learned how to use jQuery to achieve intelligent "select all" and "anti-select" linkage functions for multi-region check boxes. The core lies in a clear HTML structure design (using a common parent container class and a specific class to identify the "Select All" checkbox), as well as precise jQuery selector and event handling logic. This not only improves the interactivity of the user interface, but also greatly simplifies the check box management tasks in front-end development. Mastering these skills will help build more robust and user-experience web applications.

The above is the detailed content of jQuery implements multi-region checkbox linkage control: Select all and reverse selection function guide. For more information, please follow other related articles on the PHP Chinese website!