mercredi 22 janvier 2020

Count the number of checked check-boxes in multiple panels and show the relevant number in the correct panel using jQuery/JavaScript

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:

enter image description here




Aucun commentaire:

Enregistrer un commentaire