javascript - 计算多个面板中选中的复选框的数量，并使用 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);
      };
    });

但我不只是希望将 panel-section-main div 中的 id 与“#count_checkboxes”连接起来，这样我就可以将数字传递到右侧部分(例如“#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>