Question

当用户点击计数器#counter +1的复选框时，那很好，但当他取消选中时，对于同一个复选框，它不会为-1。我想在点击特定复选框时以及取消选中-1时+1。

- JS -

$('.CheckBox').toggle(function(){
    $('#Counter').html('( '+i+' Selected )');
    i++;
}, function() {

    $('#Counter').html('( '+i+' Selected )');
    i--;
});

--- PHP ---

do { ?>

<div style="position:relative; width:100%; height:20px; background-color:#FF5300;" class="CheckBox" id="<?php echo $row_EX['x1']; ?>">

<input type="checkbox" name="<?php echo $row_EX['x2']; ?>" value="<?php echo $row_EX['x3']; ?>" style="cursor:pointer; ">

<span style="position:relative; top:-2px; font-family:arial; color:#000; font-size:12px;"><?php echo $row_EX['lx4']; ?></span>

</div>

<div style="height:1px; width:1px;"></div>
<?php } while ($row_EX = mysql_fetch_assoc($EY)); ?>    

<span style="position:relative; left:10px; top:6px; font-family:arial; font-size:16px;" id="counter">(0 Selected)</span>

Answer 1

尝试不同的方法：

$('.CheckBox').change(function(){

  var n_checkboxes_checked = $('.CheckBox:checked').length;
  $('#Counter').html(n_checkboxes_checked + ' Selected');
});

Answer 2

$('.CheckBox').change(function() {
  if (this.checked) {
    i++;
  } else {
    i--;
  }
  $('#Counter').html('( '+i+' Selected )');
});

确保在页面加载时初始化var i = 0;。

Answer 3

您没有任何代码点击此处的复选框。 jquery中的.toggle只处理隐藏/显示元素。

UPD。我认为您不需要像其他人提出的那样浏览所有.checkbox元素。并且您不需要全局变量i。而是像

这样的东西

$('.CheckBox input').click(function(){
    $('#Counter').html('( '+$('.CheckBox input:checked').length()+' Selected )');
}

Answer 4

在jQuery文档中它说....

    Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.

.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] )
handler(eventObject)A function to execute every even time the element is clicked.
handler(eventObject)A function to execute every odd time the element is clicked.

因此它与检查/取消选中无关

这样做

$('.CheckBox').click(function(){
    if($(this).attr('checked')){
        $('#Counter').html('( '+i+' Selected )');
        i++;
    }else{
        $('#Counter').html('( '+i+' Selected )');
        i--;    
    }
}

是点击而不是切换...我错过了，你不要使用attr

Answer 5

jsFiddle演示：http://jsfiddle.net/ENxnK/2

使用change（），而不是toggle（）

var i = 0;
$('.CheckBox').change(function() {
    if ( $(this).attr('checked') ) {
        i++;
    } else {
        i--;
    }

    $('#Counter').html('( ' + i + ' Selected )');
});

计数+ / - 用于复选框单击并取消选中

5 个答案: