Question

我正在尝试计算已检查的复选框。见她：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

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

查看here

的工作示例

Answer 2

1 - 您有重复的“计数器”div ID。您应该将它们更改为类（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/

Jquery帮助计算已选中的复选框

2 个答案: