This article introduces in detail how to use jQuery to implement the "Select All/No Select All" function of multiple sets of check boxes to ensure that each set of check boxes is operated in an independent HTML container without affecting each other. By adding specific class names to the parent container and the "Select All" check box, combined with jQuery's event listening, DOM traversal and property operations, we can control the selected status of all check boxes in the same group when clicking "Select All" and reverse linkage, that is, when all check boxes in the same group are automatically selected, or when any check box is unchecked, "Select All" is automatically cancelled.

Core Requirements and HTML Structure Design

In web development, we often encounter the need to provide a "Select All" feature in a set of check boxes so that users can quickly select or uncheck all relevant options. When there are multiple independent sets of checkboxes on the page, for example, in different categories or regions, each group needs to have its own "select all" function and cannot influence each other.

To achieve this, the key is to design a reasonable HTML structure and use jQuery's selector and DOM traversal methods to define the operating range.

The recommended HTML structure is as follows:

 <div class="actions" id="actions" title="Actions">
   <!-- First group of check boxes-->
   <div class="myDiv">
       <div>
<input type="checkbox" name="action" class="selectAll" value="0"> Select All</div>
<br>
       <div>
<input type="checkbox" name="action" value="1"> Item 1</div>
<br>
       <div>
<input type="checkbox" name="action" value="2"> Item 2</div>
<br>
       <div>
<input type="checkbox" name="action" value="3"> Item 3</div>
<br>
   </div>

   <!-- Second group of check boxes-->
   <div class="myDiv">
       <div>
<input type="checkbox" name="action" class="selectAll" value="26">Select All</div>
<br>
       <div>
<input type="checkbox" name="action" value="27"> Item A</div>
<br>
       <div>
<input type="checkbox" name="action" value="28"> Item B</div>
<br>
       <div>
<input type="checkbox" name="action" value="29"> Item C</div>
<br>
       <div>
<input type="checkbox" name="action" value="30"> Item D</div>
<br>
       <div>
<input type="checkbox" name="action" value="31"> Item E</div>
   </div>
</div>

Structural points:

• myDiv class: Each independent checkbox group is wrapped in a div element with the myDiv class. This class name is key, which allows us to easily locate specific checkbox groups via jQuery.
• selectAll class: The "Select All" check box in each group should add the selectAll class. This allows us to accurately select and listen to these special check boxes.
• name attribute: Although the name attributes of all check boxes in this example are actions, in actual applications, in order to better semantic and form submission, different name attributes can be set for different groups of check boxes, but this does not affect the "select all" logic in this tutorial, because we operate based on the DOM structure.

jQuery implementation logic

We will implement the "Select All/No Select All" function through two main event listeners: one is used to handle the click event of the "Select All" check box, and the other is used to handle the click event of other ordinary check boxes in the group.

1. Control the click event of the "Select All" check box

When a user clicks on a "Select All" check box, we need to check or uncheck all other check boxes in the same group based on its 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 to which the current "Select All" checkbox belongs // Then find all input elements of type checkbox in that parent $(this).parents('.myDiv').find('input[type="checkbox"]').each(function() {
    // Set the selected status of all found check boxes to be consistent with the "Select All" check box $(this).prop('checked', isSelected);
  });
});

Code parsing:

• $('.selectAll').on('click', function() { ... });: Listen to all click events for check boxes with selectAll class.
• let isSelected = $(this).is(':checked');: Gets the selected status (true or false) of the currently clicked "Select All" check box.
• $(this).parents('.myDiv'): This is a key step. It traverses the DOM tree upwards and finds the most recent parent element with the myDiv class that is currently clicked. This ensures that the operation is limited to the group to which the current check box belongs.
• .find('input[type="checkbox"]'): Inside the found .myDiv element, find all input elements of type checkbox.
• .each(function() { ... });: Iterate over these found check boxes.
• $(this).prop('checked', isSelected);: Use the prop() method to set the checked property of each check box. prop() is the recommended way to manipulate element properties, especially for Boolean properties.

2. Control the linkage of independent check boxes

When the user clicks any non-select all check box in the group, we need to decide whether to check or uncheck the "select all" check box in the group based on the selection of all check boxes in the same group.

 $('input:not(".selectAll")').on('click', function() {
  // Get the nearest parent to which the check box is currently clicked belongs.myDiv element let $parentDiv = $(this).parents('.myDiv');

  // Get the DOM element of the "Select All" check box in the group let selectAllCheckbox = $parentDiv.find('.selectAll')[0];

  // Get the number of all non-Select All check boxes in the group let totalIndividualInputs = $parentDiv.find('input:not(".selectAll")').length;

  // Get the number of all selected non-Select All check boxes in the group let checkedIndividualInputs = $parentDiv.find('input:checked:not(".selectAll")').length;

  // Logical judgment:
  // 1. If the "Select All" check box is currently selected, but any independent check box is unchecked, cancel "Select All".
  if (selectAllCheckbox.checked && checkedIndividualInputs <p> <strong>Code parsing:</strong></p>

• $('input:not(".selectAll")').on('click', function() { ... });: Listen to all click events that are not the input type check box of the selectAll class.
• let $parentDiv = $(this).parents('.myDiv');: Similarly, find the .myDiv parent element to which the current click check box belongs to limit the operation range.
• let selectAllCheckbox = $parentDiv.find('.selectAll')[0];: Find the DOM element of the "Select All" check box in the current group. Note that [0] is to obtain the native DOM element, because the checked attribute is a native DOM attribute.
• totalIndividualInputs and checkedIndividualInputs: Calculate the total number of non-Select All check boxes in the group and the number of selected check boxes, respectively.
• Conditional judgment:
  • The first if condition: If the "Select All" check box is selected (selectAllCheckbox.checked), but the number of independent check boxes actually selected is less than the total (checkedIndividualInputs
  • The second else if condition: If all independent check boxes are selected (totalIndividualInputs === checkedIndividualInputs), the "Select All" check box is automatically selected.

Complete sample code

Combine the above HTML structure and jQuery code and introduce the jQuery library into the page to achieve the required functions.

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Multiple Groups Select All Check Box</title>
    <!-- Introducing jQuery library-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .myDiv {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 15px;
            background-color: #f9f9f9;
        }
        .myDiv div {
            margin-bottom: 5px;
        }
    </style>



<div class="actions" id="actions" title="Actions">
   <div class="myDiv">
       <div>
<input type="checkbox" name="action" class="selectAll" value="0"> **Select All Actions**</div>
<br>
       <div>
<input type="checkbox" name="action" value="1"> View Profile</div>
<br>
       <div>
<input type="checkbox" name="action" value="2"> Edit Settings</div>
<br>
       <div>
<input type="checkbox" name="action" value="3"> Delete Account</div>
<br>
   </div>

   <div class="myDiv">
       <div>
<input type="checkbox" name="action" class="selectAll" value="26">**Select All Permissions**</div>
<br>
       <div>
<input type="checkbox" name="action" value="27"> Read Access</div>
<br>
       <div>
<input type="checkbox" name="action" value="28"> Write Access</div>
<br>
       <div>
<input type="checkbox" name="action" value="29"> Execute Access</div>
<br>
       <div>
<input type="checkbox" name="action" value="30"> Admin Rights</div>
<br>
       <div>
<input type="checkbox" name="action" value="31"> Audit Logs</div>
   </div>
</div>

<script>
$(document).ready(function() {
    // Click event $(&#39;.selectAll&#39;).on(&#39;click&#39;, function() {
        let isSelected = $(this).is(&#39;:checked&#39;);
        $(this).parents(&#39;.myDiv&#39;).find(&#39;input[type="checkbox"]&#39;).prop(&#39;checked&#39;, isSelected);
    });

    // Click event $(&#39;input:not(".selectAll")&#39;).on(&#39;click&#39;, function() {
        let $parentDiv = $(this).parents(&#39;.myDiv&#39;);
        let selectAllCheckbox = $parentDiv.find(&#39;.selectAll&#39;)[0];

        let totalIndividualInputs = $parentDiv.find(&#39;input:not(".selectAll")&#39;).length;
        let checkedIndividualInputs = $parentDiv.find(&#39;input:checked:not(".selectAll")&#39;).length;

        // If the selection is checked, but some children are unchecked, unselect all if (selectAllCheckbox.checked && checkedIndividualInputs < totalIndividualInputs) {
            selectAllCheckbox.checked = false;
        } 
        // If all children are checked, check Select All else if (totalIndividualInputs === checkedIndividualInputs) {
            selectAllCheckbox.checked = true;
        }
    });
});
</script>

Notes and best practices

1. Reasonable use of class names and IDs: In this tutorial, we used class names (myDiv, selectAll) instead of IDs to identify elements, because class names can be applied to multiple elements, which is very suitable for scenarios where multiple sets of "Select All" check boxes are available. The ID should be unique.
2. jQuery selector efficiency: The combination of parents('.myDiv').find(...) is efficient, which first looks upward to the nearest specific parent element and then downward to the child element, limiting the search scope to the current group, avoiding unnecessary global DOM traversal.
3. prop() and attr(): For boolean properties (such as checked, selected, disabled), it is recommended to use the prop() method to set or get their values instead of attr(). prop() more accurately reflects the current state of the DOM element.
4. Native DOM attribute access: In selectAllCheckbox.checked = false; or selectAllCheckbox.checked = true;, we directly access the checked property of the native DOM element. This is because $(element)[0] can get the first native DOM element wrapped by the jQuery object. For the reading and writing of simple attributes, it is usually more concise to directly operate the native DOM attributes.
5. Code readability: Using meaningful variable names (such as isSelected, $parentDiv) and appropriate annotations can greatly improve the readability and maintenance of the code.
6. Error handling/boundary situation: For this function, the above code has covered common usage scenarios. But in more complex applications, you may need to consider dynamic addition/removal checkboxes, at which point you may need to rebind events or use event delegates.

Summarize

Through the above method, we successfully implemented the function of managing the "Select All/No Select All" check box in multiple independent containers using jQuery. The core is to define the boundaries of the group through a clear HTML structure, and combine jQuery's powerful DOM traversal and event processing capabilities to accurately define the operating range within each independent check box group, thereby achieving independent control without interference. This pattern is very practical when building complex forms or data filtering interfaces.

The above is the detailed content of Manage the 'Select All/No Select All' checkbox functionality in a standalone container using jQuery. For more information, please follow other related articles on the PHP Chinese website!