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

如果您想检查checbox计数，可以使用:checked选择器，如下所示：

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

Example

还有一些建议：

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

以下代码是mgechev的answer的缩短版本。 *

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

另请查看checked 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>

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

3 个答案: