0

当用户单击复选框时，计数器#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>
4

5 回答 5

3

尝试不同的方法：

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

  var n_checkboxes_checked = $('.CheckBox:checked').length;
  $('#Counter').html(n_checkboxes_checked + ' Selected');
});
于 2012-04-12T09:31:00.117 回答
3 
$('.CheckBox').change(function() {
  if (this.checked) {
    i++;
  } else {
    i--;
  }
  $('#Counter').html('( '+i+' Selected )');
});

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

于 2012-04-12T09:31:09.460 回答
0

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

更新。我认为您不需要.checkbox像其他人建议的那样遍历所有元素..而且您不需要全局变量i。取而代之的是

$('.CheckBox input').click(function(){
    $('#Counter').html('( '+$('.CheckBox input:checked').length()+' Selected )');
}
于 2012-04-12T09:29:57.627 回答
0

在它说的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

于 2012-04-12T09:30:54.357 回答
0

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

​</p>

于 2012-04-12T09:33:52.563 回答