Question

我对jQuery很陌生，我认为这对你们很多人来说可能很容易，但我似乎无法让它发挥作用。如何显示复选框的数量以使值增大或减小。

我尝试了以下操作，但是span标记中的数字仍为0：http://jsfiddle.net/yunowork/NTwxc/

由于

Answer 1

您应该收听change事件：

$('input[type=checkbox]').on('change', function(){
    var number = $('input[type=checkbox]:checked').length;
    $('.totalchecked').text(number);
});

http://jsfiddle.net/NTwxc/7/

请注意val用于获取/设置表单元素的值，因为应该使用其他元素，例如span元素，text或html方法。

Answer 2

已选中的复选框数：

$(":checkbox:checked").length

http://api.jquery.com/checked-selector/

编辑：我在你的小提琴中看到你已经拥有了那个。我会把它留在那里，因为那实际上是“如何显示已选中复选框的数量”的答案......

问题在于您没有更新并希望查看已检查的数量。每当检查任何项目时，您都需要重新运行该功能。

$(":checkbox").change(function () {
    // update the span with $(":checkbox:checked").length ...
});

Answer 3

您不应该设置范围.val，而应设置.text。

此外，每次检查状态更改时都需要更新它。

function calc() {
    $('.totalchecked').text($(':checkbox:checked').length);
}

$(calc);
$(':checkbox').change(calc);

Demo

Answer 4

问题：.val()仅适用于表单元素。要设置元素的内容，如果要插入HTML，请使用.text()或.html()。第二个问题是你需要注册一个监听器来“改变”事件。否则，该值将不会更新。

更新了解决方案：http://jsfiddle.net/NTwxc/4/

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

顺便说一句，我个人更喜欢input[type=checkbox]而不是:checkbox。前者适用于CSS和jQuery。

Answer 5

我们在这里！

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

        $('.totalchecked').empty().text($('input[type="checkbox"]:checked').size());
    });

<强> http://jsfiddle.net/toroncino/PTvG8/

显示jQuery中已选中复选框的数量

5 个答案: