如何统计复选框的复选值总数

How to count the total number of check box checked value

本文关键字：复选框 何统计 统计      更新时间：2024-01-26

我们需要添加元素中复选框检查计数值的总数。

但当我们选中"标题2"部分的复选框时，选中的计数值被添加到了"标题1"部分。

我没有发现任何一个问题请指导我解决这个问题

演示

HTMl:

    <div id="main">

    <div class="a">
                <div class="row">
                  <div class="col-md-12 cb_select_head">
                    <a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
                                    "glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
                                    <span class="count-checked-checkboxes">0</span></span>
                    <span class="fb_options_head">heading 1</span>
                  </div>
                  <ul class="sidebar fb-list-option collapse in" id="function-collapse">
                    <li><a href="" data-toggle="collapse" data-target="#Actuarial-collapse"><span class="glyphicon ecm-caret-right"></span></a>
                      <input id="c1" name="cc" type="checkbox">
                      <label for="c1">asdas</label>
                    </li>
                    <li class="noArrow">
                      <input id="c2" name="cc" type="checkbox">
                      <label for="c2">asdasd</label>
                    </li>
                    <li><a href="" data-toggle="collapse"><span class="glyphicon ecm-caret-right"></span></a>
                      <input id="c3" name="cc" type="checkbox">
                      <label for="c3">asdasd
                      </label>
                      <ul>
                                    <li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
                                    <li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
                                    <li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
                                    </ul>
                    </li>
                    <li><a href="" data-toggle="collapse"><span class="glyphicon ecm-caret-right"></span></a>
                      <input id="c4" name="cc" type="checkbox">
                      <label for="c4">asdasd</label>
                    </li>
                    <li class="noArrow">
                      <input id="c5" name="cc" type="checkbox">
                      <label for="c5">five</label>
                    </li>
                  </ul>
                </div>
              </div>
          <!--First List End-->
          <!--Second list start -->
             <div class="a">
                <div class="row">
                  <div class="col-md-12 cb_select_head">
                    <a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
                                    "glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
                                    <span class="count-checked-checkboxes">0</span></span>
                    <span class="fb_options_head">heading 2</span>
                  </div>
                  <ul class="sidebar fb-list-option collapse in" id="function-collapse">
                    <li><a href="" data-toggle="collapse" data-target="#Actuarial-collapse"><span class="glyphicon ecm-caret-right"></span></a>
                      <input id="c1" name="cc" type="checkbox">
                      <label for="c1">asdas</label>
                    </li>
                    <li class="noArrow">
                      <input id="c2" name="cc" type="checkbox">
                      <label for="c2">asdasd</label>
                    </li>
                    <li><a href="" data-toggle="collapse"><span class="glyphicon ecm-caret-right"></span></a>
                      <input id="c3" name="cc" type="checkbox">
                      <label for="c3">asdasd
                      </label>
                      <ul>
                                    <li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
                                    <li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
                                    <li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
                                    </ul>
                    </li>
                    <li><a href="" data-toggle="collapse"><span class="glyphicon ecm-caret-right"></span></a>
                      <input id="c4" name="cc" type="checkbox">
                      <label for="c4">asdasd</label>
                    </li>
                    <li class="noArrow">
                      <input id="c5" name="cc" type="checkbox">
                      <label for="c5">five</label>
                    </li>
                  </ul>
                </div>
              </div>  

 </div>

JS:

$(document).ready(function() {
    var $checkboxes = $(
        '#main ul input[type="checkbox"]');
    $checkboxes.change(function() {
        var countCheckedCheckboxes = $checkboxes.filter(
            ':checked').length;
        $('.count-checked-checkboxes').text(
            countCheckedCheckboxes);
        $('#edit-count-checked-checkboxes').val(
            countCheckedCheckboxes);
    });
});

尝试使用this引用来查找选择器的上下文。我使用了closest(".row")来查找此处的上下文。之后，我们必须在找到的上下文中选中选中的复选框并更新值。

$(document).ready(function() {
  $(":checkbox").change(function() {
  var closest = $(this).closest("div.row");
    var countCheckedCheckboxes = $(":checkbox", closest).filter(':checked').length;
    $('.count-checked-checkboxes', closest).text(countCheckedCheckboxes);
    $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
  });
});

演示

此外，Id在整个文档中必须是唯一的。但在我们的上下文中，这并没有阻止您看到预期的结果。别忘了，我永远都是独一无二的。我在你的html中发现了两个不同的id。更正。

我为您拥有的每个ul创建了一个循环：

$(document).ready(function() {
  $("#main ul").each(function() {
    var $ul = $(this);
    var $checkboxes = $ul.find('input[type="checkbox"]');
    $checkboxes.change(function() {
      var countCheckedCheckboxes = $checkboxes.filter(
        ':checked').length;
        $ul.parent().find('.count-checked-checkboxes').text(
        countCheckedCheckboxes);
        $ul.parent().find('#edit-count-checked-checkboxes').val(
        countCheckedCheckboxes);
    });
  });
});

演示

您所需要做的就是使用这个标准的DOM方法调用：

 document.querySelector("input[type=checkbox]:checked").length;

而且，要将搜索隔离到文档的特定部分，只需使用以下内容：

 var part2 = document.querySelector("part2");
 part2.querySelector("input[type=checkbox]:checked").length;

这里有一个更简单的版本。正如我在评论中提到的，您需要为ul分配不同的id（我只是将另一个命名为#function-collapse1）

$(document).ready(function() {
    $('#function-collapse li,#function-collapse1 li').on('change',function() // delegate a change event on li items in ul 
    { $(this).closest('div.row').find('span.count-checked-checkboxes') // find the respective span element to display the count
    .text($(this).closest('ul').find('li input:checkbox:checked').length); 
    });
});

示例：https://jsfiddle.net/gqcgwjq2/11/

相关文章：