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

尝试此代码，请查看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 2

尝试：checked pseudo-class：

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

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

计算复选框并显示值

6 个答案: