javascript - jQuery：计算选中的复选框 - 错误计数

Question

我有一个计算选中复选框的代码。选择时它工作正常，但是当我取消选择一些已选中的复选框时，计数会中断（向计数添加 +1）。

HTML：

<div>Number of checkboxes checked: <span id='chck'>0</span></div>
<table>
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr> 
    <tr><td><input type='checkbox' /></td></tr>    
</table>

JS：

$('tr :checkbox').change(function(){

    $('#chck').text($(this).add(':checked').length);

});

小提琴：http : //jsfiddle.net/kAsxj/

Answer 1

演示

   $('tr :checkbox').change(function(){
        $('#chck').text($(':checkbox:checked').length);
    });

Answer 2

http://jsfiddle.net/kAsxj/3/

不知道你为什么使用$(this).add(':checked')什么时候$(':checked')就足够了。

Answer 3

尝试这个

$('#chck').text($('input[type="checkbox"]:checked').length);
    //gets all input checkboxes

或者对于带有输入的特定表，您可以执行此操作

$('#chck').text($(this).closest('table').find(':checked').length);
//gets all input checkboxes within the table

演示

Answer 4

当您check或取消选中复选框时，计数不会自动增加，因此您需要：

$('input[type="checkbox"]').change(function(){
    $('#chck').text($('input[type="checkbox"]:checked').length);
}).change();

JS 小提琴演示。