計算多個面板中選中的復選框的數量，並使用 jQuery/JavaScript 在正確的面板中顯示相關數字

Question

我有多個面板 (class="panel-section)，我要計算每個面板中選中的復選框的數量，並在每個面板中顯示這個數字，並在復選框發生變化時更新這個數字。這是我的 HTML 代碼：

<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 -->

我可以使用以下方法獲取活動復選框的總數：

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

但不僅僅是“#count_checkboxes”，我希望 panel-section-main div 中的 id 與其連接，這樣我就可以將數字傳遞到正確的部分（例如“#layer_group_1_count_checkboxes”）。

我可能不會以最好的方式解決這個問題，所以也願意接受人們可能有的更好的想法。 這是我想要的輸出示例：

Answer 1

當試圖通用化內容時，又名。 DRY（不要重復自己）它，你應該避免id屬性，因為它們與你需要的相反。 而是通過類來定位元素，這樣您就可以通過它們的行為來處理它們，而不是直接以它們為目標。

因此，通過遍歷所有面板並查找選中的復選框的數量並更新該面板中的.badge ，您可以在更改復選框時實現所需的功能。

另請注意， size()已從最新版本的 jQuery 中刪除。 我建議更新到 jQuery 3.4 並改為使用length屬性。 試試這個：

 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>