How to count the total number of check box checked value

Question

we need to add the total number of check box checked count value in element.

But when we checked the check box in "heading 2" part , the checked count value was added in "heading 1" part .

I did not find the issue any one please guide me resolve this issue

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

Answer 1

Try to use the this reference to find the context of our selector. I have used the closest(".row") to find the context here. After that, we have to select the checked checkboxes inside the found context and update the values.

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

DEMO

Also Id should have to be unique throughout the document. But here in our context that is not blocking you to see the expected result. Don't forget, Id always has to be unique. I spotted 2 distinct id's in your html. Correct it.

Answer 2

Here's a simpler version. Like i mentioned in the comment, you need to have different id assigned to ul ( i just name another one as #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); 
    });
});

Example : https://jsfiddle.net/gqcgwjq2/11/

Answer 3

I created a loop for each ul you have:

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

DEMO

Answer 4

All you need to do is use this standard DOM method call:

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

And, to isolate the search to a specific section of the document, just use something like this:

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