选中复选框时查询增加/减少数量

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() + ')'); 
})

示例

还有一些建议：

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

下面的代码是mgechev答案的简短版本。*

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

Answer 2

嗨，这是您的解决方案：https://jsfiddle.net/P3zMu/254/

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=0; 
$('.checkbox').on('click', function() { 
    if (this.checked) {
        increment2++;                 
    } else {
        increment2--;
    }
    $('.number').html( '(' + increment2 + ')');             
})

致以最良好的问候！

Answer 3

还可以看看这里选中的Selector

<script>
var countChecked = function() {
var n = $( "input:checked" ).length;
$( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};
countChecked();
$( "input[type=checkbox]" ).on( "click", countChecked );
</script>