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/