This article introduces in detail how to use jQuery to implement the "Select All/No Select All" function of multiple sets of check boxes in a web page. By defining specific HTML structures and class names for each independent checkbox group and writing corresponding jQuery event processing logic, you can efficiently manage the selected status of checkboxes in each group. The tutorial covers the "Select All" button to control all check boxes in the same group, as well as the core interactive logic of updating the "Select All" button when the status of a single checkbox changes, and provides complete code examples.

In web development, you often encounter the need to perform "select all" or "select all" operations on a set of check boxes. This requirement becomes more complicated when there are multiple independent checkbox groups on the page, because the "Select All" feature in each group should only affect the checkboxes in the current group, but not the other groups. This tutorial will explain in detail how to use jQuery to implement this functionality gracefully.

1. HTML structure design

In order for jQuery to accurately identify each checkbox group and its internal "Select All" button and normal checkbox, we need to design a clear HTML structure. The key is to add a common parent container for each independent checkbox group and add a specific class name to the "Select All" checkbox.

We will use a div element as the container for each checkbox group and add the myDiv class to it. The "Select All" check box in each group will add the selectAll class uniformly.

 <div class="actions" id="actions" title="Actions">
   <!-- First checkbox group-->
   <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"> Action 1</div>
<br>
       <div>
<input type="checkbox" name="action" value="2"> Action 2</div>
<br>
       <div>
<input type="checkbox" name="action" value="3"> Action 3</div>
<br>
   </div>

   <!-- Second checkbox group-->
   <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"> Action 27</div>
<br>
       <div>
<input type="checkbox" name="action" value="28"> Action 28</div>
<br>
       <div>
<input type="checkbox" name="action" value="29"> Action 29</div>
<br>
       <div>
<input type="checkbox" name="action" value="30"> Action 30</div>
<br>
       <div>
<input type="checkbox" name="action" value="31"> Action 31</div>
   </div>
</div>

illustrate:

• class="myDiv": Identifies an independent checkbox group.
• class="selectAll": Identifies the "Select All" check box in this group.
• name="action": All check boxes can share the same name attribute, which does not affect the logic of this tutorial.

2. jQuery logic implementation

Next, we will write jQuery code to handle the interactive logic of the checkbox. This mainly includes two parts: handling the click event of the "Select All" check box, and handling the click event of the single check box.

2.1 Handle click events in the "Select All" check box

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

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

  // Find the parent group (.myDiv) of the current "Select All" check box, and then find all check boxes inside it // and set their selected status to be consistent with the "Select All" check box $(this).parents('.myDiv').find('input[type="checkbox"]').prop('checked', isSelected);
});

explain:

• $('.selectAll').on('click', function() { ... });: binds click events for all check boxes with selectAll class.
• $(this).is(':checked'): Gets the selected status (true or false) of the currently clicked "Select All" check box.
• $(this).parents('.myDiv'): Iterates upwardly through the DOM tree to find the nearest parent element with the myDiv class in the current selectAll check box, which ensures that operations are limited to the current group.
• .find('input[type="checkbox"]'): In the found .myDiv group, find all elements with type checkbox.
• .prop('checked', isSelected): Sets the checked property of these found checkboxes to be consistent with the value of isSelected.

2.2 Handling click events for a single check box

When the user clicks a normal check box that is not "Select All" in the group, we need to check the selected status of all normal check boxes in the group and update the status of the "Select All" check box accordingly. The specific logic is: if all normal check boxes are selected, the "Select All" check box should also be selected; otherwise, the "Select All" check box should be unselected.

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

  // Get all the non-select all normal check boxes in the current group let $normalCheckboxes = $parentDiv.find('input:not(".selectAll")');

  // Get the number of normal check boxes selected in the current group let numberInputChecked = $normalCheckboxes.filter(':checked').length;

  // Get the total number of normal check boxes in the current group let numberInput = $normalCheckboxes.length;

  // Get the "Select All" check box for the current group let $selectAllCheckbox = $parentDiv.find('.selectAll');

  // If all normal check boxes are selected, the "Select All" check box should also be selected if (numberInput === numberInputChecked) {
    $selectAllCheckbox.prop('checked', true);
  } else {
    // Otherwise, the "Select All" check box should be unchecked $selectAllCheckbox.prop('checked', false);
  }
});

explain:

• $('input:not(".selectAll")').on('click', function() { ... });: binds click events for all input check boxes that are not the selectAll class.
• let $parentDiv = $(this).parents('.myDiv');: Similarly, first locate the .myDiv group to which the current check box belongs.
• $parentDiv.find('input:not(".selectAll")'): Find all non-Select All check boxes in the current group.
• .filter(':checked').length: Filter out the selected ones from the above normal checkboxes and get their number.
• $normalCheckboxes.length: Gets the total number of normal check boxes.
• Determine the checked property of the "Select All" checkbox by comparing the number of selected and total.

3. Complete sample code

Combining the above HTML structure and jQuery logic can achieve the required functions. Make sure to introduce the jQuery library before running the code.

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-region checkbox selection function</title>
    <!-- Introducing jQuery library-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        /* Simple style to make the structure clearer*/
        .myDiv {
            border: 1px solid #ccc;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        .myDiv div {
            margin-bottom: 5px;
        }
        .myDiv .selectAll {
            font-weight: bold;
            color: #0056b3;
        }
    </style>



    <div class="actions" id="actions" title="Actions">
       <!-- First checkbox group-->
       <div class="myDiv">
           <div>
<input type="checkbox" name="action" class="selectAll" value="0"> Select All (Group 1)</div>
<br>
           <div>
<input type="checkbox" name="action" value="1"> Item 1.1</div>
<br>
           <div>
<input type="checkbox" name="action" value="2"> Item 1.2</div>
<br>
           <div>
<input type="checkbox" name="action" value="3"> Item 1.3</div>
<br>
       </div>

       <!-- Second checkbox group-->
       <div class="myDiv">
           <div>
<input type="checkbox" name="action" class="selectAll" value="26">Select All (Group 2)</div>
<br>
           <div>
<input type="checkbox" name="action" value="27"> Item 2.1</div>
<br>
           <div>
<input type="checkbox" name="action" value="28"> Item 2.2</div>
<br>
           <div>
<input type="checkbox" name="action" value="29"> Item 2.3</div>
<br>
           <div>
<input type="checkbox" name="action" value="30"> Item 2.4</div>
<br>
           <div>
<input type="checkbox" name="action" value="31"> Item 2.5</div>
       </div>
    </div>

    <script>
        // Handle 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);
        });

        // Handle click event $(&#39;input:not(".selectAll")&#39;).on(&#39;click&#39;, function() {
            let $parentDiv = $(this).parents(&#39;.myDiv&#39;);
            let $normalCheckboxes = $parentDiv.find(&#39;input:not(".selectAll")&#39;);
            let numberInputChecked = $normalCheckboxes.filter(&#39;:checked&#39;).length;
            let numberInput = $normalCheckboxes.length;
            let $selectAllCheckbox = $parentDiv.find(&#39;.selectAll&#39;);

            if (numberInput === numberInputChecked) {
                $selectAllCheckbox.prop(&#39;checked&#39;, true);
            } else {
                $selectAllCheckbox.prop(&#39;checked&#39;, false);
            }
        });
    </script>

4. Precautions and summary

• Class name convention: Using common class names like myDiv and selectAll can make the code more readable and maintainable, making it easier to reuse in multiple pages or components.
• Scope limitation: The combination of parents('.myDiv').find(...) is the key to implementing the local "select all" function. It ensures that the operation is only done inside the current checkbox group, avoiding cross-group impact.
• Performance Considerations: For complex pages that contain a large number of (hundreds of thousands) check boxes, frequent DOM operations may affect performance. However, for most common application scenarios, the method performance provided by this tutorial is completely sufficient.
• Initial status: If some check boxes are selected by default when the page is loaded, you may need to perform a check after the page is loaded to correctly set the initial "Select All" check box status. This can be done by triggering a click event in $(document).ready() or calling logic manually.
• User Experience: Consider adding additional styling to the Select All check box to make it easier to recognize.

Through the above steps, we have successfully implemented the "Select All/No Select All" function of managing check boxes in multiple independent div areas. This method is well-structured and rigorous in logic, and is an effective practice in dealing with such interactive needs.

The above is the detailed content of Use jQuery to implement the 'Select All/No Select All' function of check boxes in multiple regions. For more information, please follow other related articles on the PHP Chinese website!