Jquery help counting checked checkboxes

Question

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" 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>

Gabe · Accepted Answer · 2011-08-04 00:55:34Z

3

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

Check a working example out here

edited Aug 4, 2011 at 0:55

answered Aug 4, 2011 at 0:48

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rails beginner Over a year ago

IT should not count all checkboxes there is 1 counter for each menuitem and it should count all checked checkboxes that is in the hidediv and the menuitems checkbox

karim79 · Accepted Answer · 2011-08-04 00:55:25Z

1

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/

edited Aug 4, 2011 at 0:55

answered Aug 4, 2011 at 0:47

karim79

343k67 gold badges420 silver badges409 bronze badges

3 Comments

Rails beginner Over a year ago

There is a problem with that Jquery because if the div is clicked the checkbox gets checked but it the counter dos not update. The counter should update when clicked on the div and the checkbox

Rails beginner Over a year ago

The checkboxes in the minimenu is not either added to the counter

karim79 Over a year ago

Change the labels for the checkboxes to match the IDS of the checkboxes and you don't need the divs to be clickable.

Collectives™ on Stack Overflow

Jquery help counting checked checkboxes

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related