doufud21086
2012-04-12 09:23
浏览 9

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

When a user clicks the checkbox the counter #counter +1, thats fine, but when he unchecks it does not -1 for the same checkbox. I want to +1 when they click a particular checkbox and when unchecking -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>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • dsj2222222 2012-04-12 09:31
    已采纳
    $('.CheckBox').change(function() {
      if (this.checked) {
        i++;
      } else {
        i--;
      }
      $('#Counter').html('( '+i+' Selected )');
    });
    

    Make sure you initialise var i = 0; when the page loads.

    已采纳该答案
    打赏 评论
  • duanchuang6978 2012-04-12 09:29

    You don't have any code that deals with clicking on checkbox here. .toggle in jquery just deals with hiding/showing element.

    upd. i think you don't need to go through all .checkbox elements as others have proposed.. and you don't need global variable i. Instead something like

    $('.CheckBox input').click(function(){
        $('#Counter').html('( '+$('.CheckBox input:checked').length()+' Selected )');
    }
    
    打赏 评论
  • doujuanju3076 2012-04-12 09:30

    in the jQuery documentation it says....

        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.
    

    so it has nothing to do with check/uncheck

    do it this way

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

    yes click instead of toggle...i missed that and u shud use attr instead

    打赏 评论
  • dpe77294 2012-04-12 09:31

    try a different approach:

    $('.CheckBox').change(function(){
    
      var n_checkboxes_checked = $('.CheckBox:checked').length;
      $('#Counter').html(n_checkboxes_checked + ' Selected');
    });
    
    打赏 评论
  • dongwuqi4243 2012-04-12 09:33

    jsFiddle demo: http://jsfiddle.net/ENxnK/2

    Use change(), not toggle()

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

    打赏 评论

相关推荐 更多相似问题