如何添加复选框检查计数值

时间：2016-04-06 16:18:42

标签： javascript jquery

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

但当我选中＆＃34;标题2＆＃34;中的复选框时部分，计数值被添加到＆＃34;标题1和＃34;部分。

我没有找到任何问题，请指导我解决这个问题

DEMO

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

3 个答案:

答案 0 :(得分：0)

查看工作解决方案。记住ID必须是唯一的，并且尽可能避免使用ID，例如将输入元素放在标签内而不是使用Id

＆＃13;
＆＃13; 
$(document).ready(function() {
  var $checkboxes1 = $('#head1 ul input[type="checkbox"]');
  var $checkboxes2 = $('#head2 ul input[type="checkbox"]');
  $checkboxes1.change(function() {
    var countCheckedCheckboxes = $checkboxes1.filter(':checked').length;
    $('#head1 .count-checked-checkboxes').text(countCheckedCheckboxes);
  });
  $checkboxes2.change(function() {
    var countCheckedCheckboxes = $checkboxes2.filter(':checked').length;
    $('#head2 .count-checked-checkboxes').text(countCheckedCheckboxes);
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="head1">
    <div class="row">
      <div class="col-md-12 cb_select_head">
        <span class="count-checked-checkboxes">0</span>
        <span class="fb_options_head">heading 1</span>
      </div>
      <ul class="sidebar fb-list-option collapse in">
        <li>
          <label>
            <input name="cc" type="checkbox">One
          </label>
        </li>
        <li class="noArrow">
          <label>
            <input name="cc" type="checkbox">Two
          </label>
        </li>
        <li>
          <ul>
            <li>
              <label>
                <input name="cc" type="checkbox">3 - a
              </label>
            </li>
            <li>
              <label>
                <input name="cc" type="checkbox">3 -b
              </label>
            </li>
            <li>
              <label>
                <input name="cc" type="checkbox">2 - c
              </label>
            </li>
          </ul>
        </li>
        <li>
          <label>
            <input name="cc" type="checkbox">four
          </label>
        </li>
        <li class="noArrow">
          <label>
            <input name="cc" type="checkbox">five
          </label>
        </li>
      </ul>
    </div>
  </div>
  <!--First List End-->

  <!--Second list start -->

  <div class="a" id="head2">
    <div class="row">
      <div class="col-md-12 cb_select_head">
        <span class="count-checked-checkboxes">0</span>
        <span class="fb_options_head">heading 1</span>
      </div>
      <ul class="sidebar fb-list-option collapse in">
        <li>
          <label>
            <input name="cc" type="checkbox">One
          </label>
        </li>
        <li class="noArrow">
          <label>
            <input name="cc" type="checkbox">Two
          </label>
        </li>
        <li>
          <ul>
            <li>
              <label>
                <input name="cc" type="checkbox">3 - a
              </label>
            </li>
            <li>
              <label>
                <input name="cc" type="checkbox">3 - b
              </label>
            </li>
            <li>

              <label>
                <input name="cc" type="checkbox">2 - c
              </label>
            </li>
          </ul>
        </li>
        <li>
          <label>
            <input name="cc" type="checkbox">four
          </label>
        </li>
        <li class="noArrow">
          <label>
            <input name="cc" type="checkbox">five
          </label>
        </li>
      </ul>
    </div>
  </div>


</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

查看是否this works。

忽略其他人提到的一切，关于ID需要是唯一的，什么不是，我能够使用DOM遍历计算每个标题的框。

我将jQuery更改为：

$(document).ready(function() {
    $('.a').each(function(){
        var $checkboxes = $(this).find('input[type="checkbox"]');
        $checkboxes.change(function() {
           var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
        $(this).closest('.a').find('.count-checked-checkboxes').text(
            countCheckedCheckboxes);
        });
    });
});
  1. 遍历每个元素'.a'
  2. 使用$（this）.find（'input [type =“checkbox”]'）;获得相关的复选框
  3. 在更改时，遍历DOM直到找到'.a'，从那里你可以遍历并找到标题类'.count-checked-checkboxes'

    4. 虽然可能有更好的方法。

    .closest（）从当前元素开始向上移动以寻找匹配。

    .find（）向下穿过后代。

答案 2 :(得分：-1)

夫妻俩。

j08691是对的，ID必须是唯一的。浏览器获得第一个#count-checked-checkboxes并填充该值。

此外，您将获得所有复选框的计数，这些复选框将统计所有复选框，无论它们位于哪个div

我建议如下：

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

但你仍然得到所有的复选框。此时我会将您的第二个<div class="a">更改为<div class="b">，然后重复上述声明：

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

当然，更改您的ID以匹配jquery中的ID。

https://jsfiddle.net/gqcgwjq2/28/

相关问题
最新问题