计数复选框，显示值

Question

我使用下面的jQuery显示所选

$(document).ready(function(){ 
    $('.check:button').toggle(function(){ 
     $('input:checkbox').attr('checked','checked'); 
    var count = $("input[type=checkbox]:checked").size(); 
     $(this).val('uncheck all') 
     $("#count").text(count+ " item(s) selected"); 
    },function(){ 
     $('input:checkbox').removeAttr('checked'); 
     var count = $("input[type=checkbox]:checked").size(); 
     $(this).val('check all'); 
     $("#count").text(count+ " item(s) selected"); 
    }) 
}) 

这里所选号码复选框是HTML

<input type="button" class="check" value="check all" /> 
<input type="checkbox" class="cb-element" /> Checkbox 1 
<input type="checkbox" class="cb-element" /> Checkbox 2 
<input type="checkbox" class="cb-element" /> Checkbox 3 

<p id="count"></p> 

当我检查所有它显示了正确的数字，就像选择了3个项目，当我取消全选，然后显示选择的项目。

但是，当我删除单个选定的复选框，然后计数不显示。如果我删除一个，那么计数仍然是3，而不是2.

我该如何做到这一点？

Answer 1

尝试：检查伪类：使用

$("input[type=checkbox]").click(function() { 
    $("#count").html($("input[type=checkbox]:checked").length); 
}); 

Answer 2

试试这个代码，检查api要了解详情，

var countChecked = function() { 
    var n = $("input:checked").length; 
    $("p").text(n + (n === 1 ? " is" : " are") + " checked!"); 
}; 
countChecked(); 
$("input[type=checkbox]").on("click", countChecked); 

Answer 3

$("input:checkbox:checked").length; 

DEMO

$("input:checkbox").change(function() { 
    $('#count').text($("input:checkbox:checked").length); 
}); 

Answer 4

var count = 0; 
$('input[type=checkbox]').each(function() { 
     if (this.checked) { 
      count++; 
     } 
}); 
alert(count); 

Answer 5

$("input[type=checkbox]").click(function(){ 

     $('#count').html($("input[type=checkbox]:checked").length); 
}); 

Answer 6

这是给你的计数：

$('input:checkbox').on('change', function(){ 
    $('#count').html($('input:checkbox:checked').size()); 
}); 

jsFiddle