0

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

我尝试了以下方法，但 span 标签中的数字仍然为 0：http: //jsfiddle.net/yunowork/NTwxc/

谢谢

4

5 回答 5

5

您应该收听该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应使用方法。

于 2012-09-07T10:14:36.917 回答
0

选中复选框的数量：

$(":checkbox:checked").length

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

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

问题是您没有更新并查看检查了多少。每当检查任何项目时，您都需要重新运行该功能。

$(":checkbox").change(function () {
    // update the span with $(":checkbox:checked").length ...
});
于 2012-09-07T10:13:52.423 回答
0

您不应该设置.val跨度，但是.text.

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

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

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

演示

于 2012-09-07T10:14:23.360 回答
0

问题：.val()仅适用于表单元素。要设置元素的内容，请使用.text()or.html()如果您正在插入 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。

于 2012-09-07T10:15:37.260 回答
0

我们到了！ 

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

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

http://jsfiddle.net/toroncino/PTvG8/

于 2012-09-07T10:18:01.463 回答