come contare ogni controllati caselle

Question

Ecco il mio codice:

In realtà conta caselle controllato e scrivere dentro <span class="counter"></span>. Questo codice funziona su Firefox, ma non su Chrome.

Su Chrome, il segno .seleziona seleziona tutte le caselle di controllo che desidero, ma non aggiorna il contatore. In realtà il contatore si aggiorna quando deseleziono il .select_all, il che è strano.

fatto importante: Non voglio contare le caselle .Select_all dentro la mia .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: Ecco un documento esempio del codice: http://jsfiddle.net/8PVDy/1/

Answer 1

Puoi utilizzare una funzione per aggiornare il contatore:

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

e chiamare questa funzione quando un chec lo stato di KBOX viene modificato (tra cui le caselle selectAll)

Ecco un jsFiddle aggiornamento: http://jsfiddle.net/8PVDy/4/

Answer 2

$('input[type="checkbox"]:checked').length 

Answer 3

Per aggiornare lo stato controllato utilizzare la funzione

Codice jQuery.prop():

$(function(){ 
    $('#general i .counter').text(' '); 

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

    $("#general-content input:checkbox").on("change", function() { 
       fnUpdateCount(); 
      }); 

    $('.select_all').change(function() { 
       var checkthis = $(this); 
       var checkboxes = $("#general-content input:checkbox"); 

       if (checkthis.is(':checked')) { 
        checkboxes.prop('checked', true); 
       } else { 
        checkboxes.prop('checked', false); 
       } 
       fnUpdateCount(); 
      }); 
}); 

Demo: Fiddle

Answer 4

Prova questo.

$('.select_all').change(function() { 
var num = $(this).find("input[name='wpmm[]']:checked").length; 
$("#general .counter").html(num); 
}); 

Answer 5

Modificato il Select All-handler per attivare la funzione onchange per le caselle di controllo sub-categoria come questo

$(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); 
     } 
     // make sure to trigger the onchange behaviour for the checkboxes 
     $("#general-content input:checkbox").change(); 
    }); 
}) 

Mi sembra di ricordare che c'è un modo più bello per innescare loro, ma può' t trovano

Answer 6

si può fare in questo modo

$(document).ready(function(){ 
$('input[type="checkbox"]').click(function(){ 
    alert($('.test:checked').length); 

}); 
}); 

HTML ho usato

<input type="checkbox" name="test" class="test" value=""/> 
<input type="checkbox" name="test" class="test" value=""/> 
<input type="checkbox" name="test" class="test" value=""/> 
<input type="checkbox" name="checkAll" class="checkAll" value=""/> 

Spero che questo aiuti