Count how many checkbox have been checked

Question

I am using the following code to check how many checkbox user has checked.

var empty_watch = $('#clocks').find('input.checkbox:checked').length;

This is used in form validation: if empty_watch is 0 then do not post form: user must choose at least one item (and there is not a default one).

HTML is the following:

<div id="clocks" class="sez-form">
<fieldset>
<legend> Orologi inclusi </legend>
<div class="percheckbox">
    <input class="clock" type="checkbox" value="1" name="orologio">Browser
</div>
<div class="percheckbox">
    <input class="clock" type="checkbox" value="2" name="orologio">Prototipo1
</div>
<div class="percheckbox">
    <input class="clock" type="checkbox" value="3" name="orologio">test FP
</div>
<br style="clear: both;">
</fieldset>
</div>

Even if I check all the checkboxes empty_watch is still 0. What am I doing wrong?

Answer 1

Your find selector:

'input.checkbox:checked'

looks for an input with a class of 'checkbox'. You should be looking at the 'type' attribute of the element.

Instead try:

'input[type="checkbox"]:checked'

Answer 2

There is a specific :checkbox pseudo selector. It does the same as input[type=checkbox] :

var empty_watch = $('#clocks').find(':checkbox:checked').length;

As you already target #clock then find, this will be pretty good speed-wise too.

You could reduce it slightly, to the following, if you know there are no other checkable inputs:

var empty_watch = $('#clocks').find(':checked').length;