How to count every checked checkboxes

Question

Here is my code :

It actually count checked checkboxes and write it inside <span class="counter"></span>. This code works on Firefox, but not on Chrome.

On Chrome, the .select_all check all checkboxes I want, but doesn't update the counter. Actually counter get updated when I uncheck the .select_all, which is weird.

IMPORTANT FACT: I don't want to count the .Select_all checkboxes inside my .counter

jQuery(document).ready(function($){  $(function() {     $('#general i .counter').text(' ');      var generallen = $("#general-content input[name='wpmm[]']:checked").length;     if(generallen>0){$("#general i .counter").text('('+generallen+')');}else{$("#general i .counter").text(' ');} })  $("#general-content input:checkbox").on("change", function() {     var len = $("#general-content input[name='wpmm[]']:checked").length;     if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');} });   $(function() {     $('.select_all').change(function() {         var checkthis = $(this);         var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']");          if(checkthis.is(':checked')) {             checkboxes.attr('checked', true);         } else {             checkboxes.attr('checked', false);         }     }); });  }); 

EDIT: Here is a example document of the code : http://jsfiddle.net/8PVDy/1/

Answer 1

You can use a function to update the counter :

function updateCounter() {     var len = $("#general-content input[name='wpmm[]']:checked").length;     if(len > 0){        $("#general i .counter").text('('+len+')');     } else {         $("#general i .counter").text(' ');     } } 

and call this function when a checkbox's state is changed (including the selectAll checkboxes)

Here is an updated jsFiddle : http://jsfiddle.net/8PVDy/4/