如何添加復選框選中的計數值

Question

我需要在元素中添加復選框選中計數值的總數。

但是，當我選中“標題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);
    });
});

Answer 1

看到有效的解決方案。 請記住，ID必須是唯一的，並盡可能避免使用ID，例如將輸入元素放在標簽中而不是與ID一起使用。

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

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

Answer 2

看看是否可行 。

忽略其他人提到的所有內容，關於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”

不過，可能有更好的方法。

.closest（）從當前元素開始，然后向上移動以查找匹配項。

.find（）向下穿越后代。

Answer 3

夫妻的事。

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/