jquery - 计数复选框并显示值

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

试试 :checked 伪类：

$("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;

演示

$("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