How to add check box checked count value

Question

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

But when i checked the check box in "heading 2" part , the 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

see the working solution. Remember IDs needs to be unique, and avoid use of IDs whenever possible like putting input element inside the label instead of using with 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

See if this works .

Ignoring everything others have mentioned, about ID's needing to be unique and what not, I was able to tally checked boxes for each heading using DOM traversal.

I changed the jQuery to:

$(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. Loop through each element '.a'
2. Use $(this).find('input[type="checkbox"]'); to get just the relevant checkboxes
3. On change, traverse up the DOM until you find '.a', from there you can traverse down and find the heading class '.count-checked-checkboxes'

There's probably a better way to do this though.

.closest() starts at the current element and travels upwards looking for a match.

.find() travels downwards through descendants.

Answer 3

Couple things.

j08691 is right, IDs must be unique. The browser is getting the first #count-checked-checkboxes and filling that value.

Also, you are getting the count for all checkboxes which is going to tally all checkboxes regardless of which div they are in

I would suggest the following:

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

But you are still getting all checkboxes. At which point I would change your second <div class="a"> to <div class="b"> and then duplicate the above statement like so:

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

And of course change your IDs to match the ones in the jquery.

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