Jquery help counting checked checkboxes

I am trying to count the checkhed checkboxes. See her: http://jsfiddle.net/2bCdR/2/ The Jquery counter does not work and does also deactive the other Jquery.

My Jquery {

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

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

My HTML

<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8"开发者_如何学Python 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>

---

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

Check a working example out here

---

1 - You have duplicate 'counter' div IDs. You should change them to classes (IDs should never be duplicated).

2 - You do not need a loop. A single click handler with appropriate traversal will do it.

$(":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);
});

Demo: http://jsfiddle.net/mvdnj/1/