jQuery 在复选框时增加/减少数字

Question

所以我有这个代码:

HTML

<input type=checkbox class="checkbox" />
<input type=checkbox class="checkbox" />
<input type=checkbox class="checkbox" />
<input type=checkbox class="checkbox" />

<div class="number">
    hello
</div>

JS

var increment2 = 1;
$('.checkbox').live('click', function() {
    $('.number').html( '(' + increment2 + ')');
    increment2++;
})

http://jsfiddle.net/P3zMu/5/

单击复选框时，它会增加数字，如示例所示。问题是在选中复选框时增加数字，在取消选中复选框时减少数字。如果您有任何帮助，我们将非常感激。

Answer 1

如果您想要检查复选框数量，您可以使用 :checked 选择器，如下所示:

$('.checkbox').live('click', function() {
    $('.number').html( '(' + $(':checked').size() + ')'); 
})

Example

还有一些建议:

1. 从 jQuery 1.7 开始，.live() 方法已被弃用。使用.on()附加事件处理程序。旧版本 jQuery 的用户应使用 .delegate()优先于 .live()。 (来自documentation)
2. 我建议使用 change 事件而不是 click。
3. 您可以使用 :checkbox 选择器选择复选框。如果您使用 .checkbox 类来选择复选框，这可能是更好的方法。

下面的代码是 mgechev 的较短版本的answer 。 *

var increment2=0;
$('.checkbox').live('change', function() {
    $('.number').html( '(' + (increment2 += this.checked ? 1 : -1) + ')');             
})