计算多个面板中选中的复选框的数量，并使用 jQuery/JavaScript 在正确的面板中显示相关数字

Question

I have multiple panels (class="panel-section) and I was to count the number of checked check-boxes in each and display this number in each panel, and have this number update when there is a check-box change. This is my HTML code:

<div class="panel-section">
    <!-- Layer Group Heading -->
    <div class="panel-section-top">
        <a href="javascript:;" class="expand-toggle">Group 1
        <span id="layer_group_1_count_checkboxes" class="badge"></span></a>
    </div> <!-- end (Group Name) -->    
    <div class="panel-section-main" id="layer_group_1"> 
        <!-- Layer -->
        <div class="layer">
            <div class="list-group" style="margin-bottom: 0px;">
                <label class="checkbox-inline switch-button" for="visible10">
                    <input type="checkbox" name="layer_10" class="visible" id="visible10">
                    <div class="switch-button-background">
                        <div class="switch-button-button"></div>
                    </div>
                </label>
                <h4>Layer 1</h4>
            </div>
        </div> <!-- end .layer -->
        <!-- Layer -->
        <div class="layer">
            <div class="list-group" style="margin-bottom: 0px;">
                <label class="checkbox-inline switch-button" for="visible11">
                    <input type="checkbox" name="layer_11" class="visible" id="visible11">
                    <div class="switch-button-background">
                        <div class="switch-button-button"></div>
                    </div>
                </label>
                <h4>Layer 2</h4>
            </div>
        </div> <!-- end .layer -->
    </div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_1 -->
<div class="panel-section">
    <!-- Layer Group Heading -->
    <div class="panel-section-top">
        <a href="javascript:;" class="expand-toggle">Group 2
        <span id="layer_group_2_count_checkboxes" class="badge"></span></a>
    </div> <!-- end (Group Name) -->    
    <div class="panel-section-main" id="layer_group_2"> 
        <!-- Layer -->
        <div class="layer">
            <div class="list-group" style="margin-bottom: 0px;">
                <label class="checkbox-inline switch-button" for="visible20">
                    <input type="checkbox" name="layer_20" class="visible" id="visible20">
                    <div class="switch-button-background">
                        <div class="switch-button-button"></div>
                    </div>
                </label>
                <h4>Layer 1</h4>
            </div>
        </div> <!-- end .layer -->
        <!-- Layer -->
        <div class="layer">
            <div class="list-group" style="margin-bottom: 0px;">
                <label class="checkbox-inline switch-button" for="visible11">
                    <input type="checkbox" name="layer_21" class="visible" id="visible21">
                    <div class="switch-button-background">
                        <div class="switch-button-button"></div>
                    </div>
                </label>
                <h4>Layer 2</h4>
            </div>
        </div> <!-- end .layer -->
    </div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_2 -->

And I can get the number of total check-boxes that are active using the following:

    //Get the number of total layers active
    $(document).ready(function () {
      $("input[type=checkbox]").each(function () {
        $(this).change(updateCount);
      });
      updateCount();
      function updateCount () {
        var count = $("input[type=checkbox]:checked").size();
        $("#count_checkboxes").text(count);
        $("#status").toggle(count > 0);
      };
    });

But instead of just "#count_checkboxes" I want the id from the panel-section-main div to join with it so I can pass the number to the right section (eg "#layer_group_1_count_checkboxes").

I may not be going about this the best way so also open to better ideas people may have. This is an example of the output I want:

Answer 1

When trying to genericise content, aka. DRY (Don't Repeat Yourself) it up, you should avoid id attributes as they are the opposite of what you need. Instead target elements by their classes so you can deal with them by their behaviour instead of targeting them directly.

As such you can achieve what you need when a checkbox is changed by looping through all the panels and finding the number of checked checkboxes and updating the .badge within that panel.

Also note that size() has been removed from the latest versions of jQuery. I'd suggest updating to jQuery 3.4 and using the length property instead. Try this:

 jQuery(function($) { $("input[type=checkbox]").on('change', updateCount); updateCount(); function updateCount() { $('.panel-section').each(function() { var $panel = $(this); var count = $panel.find(':checkbox:checked').length; $panel.find('.badge').text(count); }); }; });

 .panel-section-main { border: 1px solid #CCC; } a { text-decoration: none; }.badge { background-color: #C00; border-radius: 50%; padding: 5px 9px; color: #FFF; }.panel-section-main.layer.list-group { margin-bottom: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="panel-section"> <div class="panel-section-top"> <a href="#" class="expand-toggle"> Group 1 <span class="badge"></span> </a> </div> <div class="panel-section-main"> <div class="layer"> <div class="list-group"> <label class="checkbox-inline switch-button"> <input type="checkbox" name="layer_10" class="visible" id="visible10"> <div class="switch-button-background"> <div class="switch-button-button"></div> </div> </label> <h4>Layer 1</h4> </div> </div> <div class="layer"> <div class="list-group"> <label class="checkbox-inline switch-button"> <input type="checkbox" name="layer_11" class="visible" id="visible11"> <div class="switch-button-background"> <div class="switch-button-button"></div> </div> </label> <h4>Layer 2</h4> </div> </div> </div> </div> <div class="panel-section"> <div class="panel-section-top"> <a href="#" class="expand-toggle"> Group 2 <span class="badge"></span> </a> </div> <div class="panel-section-main"> <div class="layer"> <div class="list-group"> <label class="checkbox-inline switch-button" for="visible20"> <input type="checkbox" name="layer_20" class="visible" id="visible20"> <div class="switch-button-background"> <div class="switch-button-button"></div> </div> </label> <h4>Layer 1</h4> </div> </div> <div class="layer"> <div class="list-group"> <label class="checkbox-inline switch-button"> <input type="checkbox" name="layer_21" class="visible" id="visible21"> <div class="switch-button-background"> <div class="switch-button-button"></div> </div> </label> <h4>Layer 2</h4> </div> </div> </div> </div>