Jquery幫助計算選中的複選框

Question

我正在計數checkhed複選框。看她：http://jsfiddle.net/2bCdR/2/ Jquery計數器不起作用，並且也禁用其他Jquery。

我的Jquery {

$.each($('div.category'), function() { 
var categoryDiv = $(this); 
function countChecked() { 
    var n = $("categoryDiv input:checked").length; 
    $("categoryDiv #counter").text(n); 
} 
} 
countChecked(); 

$(":checkbox").click(countChecked); 

我的HTML

<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div> 

     <div class="menuitem category"> 
      <label for="search_company1">company1</label> 
      <input name="search[company1_is_true]" type="hidden" value="0" /> 
      <input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" /> 
      <div id="counter"></div> 
     </div> 
     <div class="menuitem category"> 
      <label for="search_company3">company3</label> 
      <input name="search[company3_is_true]" type="hidden" value="0" /> 
      <input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" /> 
      <div id="counter"></div> 
     </div> 
     <div class="hidediv"> 
      <div class="menuitem"> 
       <label for="search_company2">company2</label> 
       <input name="search[company2_is_true]" type="hidden" value="0" /> 
       <input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" /> 

      </div> 
     </div> 
     <input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" /> 
</form> 

Answer 1

1 - 你有重複的 '櫃檯' Div編號。您應該將它們更改爲類（不應該重複ID）。

2 - 您不需要循環。一個適當的遍歷單擊處理程序將做到這一點。

$(":checkbox").click(function() { 

    // find closest category parent div 
    var $cat = $(this).closest(".category"); 

    // get checkbox within category, check length 
    var len = $cat.find(":checkbox:checked").length; 

    // update the div's counter 
    $cat.find(".counter").text(len); 
}); 

演示：http://jsfiddle.net/mvdnj/1/

Answer 2

var checked = $(':checkbox:checked', '.menuitem, .hidediv').length; 

檢查工作的例子出來here