jquery php form validation checkbox

Question

    <input type="checkbox" class="christmasCheckBox" name="additionalDonationCheckbox" value="yes" id="additionalDonationCheckbox" 
<?php echo (isset($_POST['additionalDonationCheckbox'])&&($_POST['additionalDonationCheckbox']!='')) ? 'checked="checked"' : ''; ?> />



$('#additionalDonationCheckbox').click(
    function()
    {
        ($(this).attr('checked')) ? alert('checked') : alert('unchecked');
    }
);

I have a form, and before I submit it, if i click the checkbox it alerts 'checked' if checked and 'unchecked' if unchecked.

If i submit the form with the checkbox unchecked, (and something else in the form fails my php validation), and then click the checkbox, the above still works correctly.

However, if i submit the form with the checkbox CHECKED, (and something else in the form fails my php validation) and then click the checkbox, whether it is unchecked or checked it just alerts 'checked'.

I am guessing this is because i have set the php code in the input to echo 'checked="checked"', but i cant figure a way around this?

mmcnickle · Accepted Answer · 2011-10-14 13:18:41Z

1

You want to change the way you determine if the element is checked:

$('#additionalDonationCheckbox').click(
    function()
    {
        $(this).is(':checked') ? alert('checked') : alert('unchecked');
    }
);

Or

$('#additionalDonationCheckbox').click(
    function()
    {
        $(this).prop('checked') ? alert('checked') : alert('unchecked');
    }
);

This is because checked is both a DOM property and a DOM attribute. The difference between them can be important in some situations (like this).

The DOM attribute checked refers to the initial state of the checkbox. So if the checkbox was created with checked="checked", the DOM attribute checked will always return 'checked', even if the checkbox has since been unchecked.

The DOM property checked refers to the current state of the checkbox, and behaves like you want it to. It will return whether a checkbox is checked now regardless of whether it was checked when the document was loaded.

It's a subtle difference confused by the fact that jQuery is inconsistent on whether $.attr('checked') returns the attribute or property across versions. Details can be found in the documentation.

This is further confused by a bug in jquery 1.6.3 and 1.6.4 that returns a stale value for $(checkbox).attr('checked') after $(checkbox).click().

In summary, if you want to be sure you are getting the current state of the checkbox, either use the is(':checked') call or the prop('checked') call.

edited Oct 14, 2011 at 13:18

answered Oct 14, 2011 at 12:32

mmcnickle

1,59710 silver badges13 bronze badges

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

2 Comments

Tules Over a year ago

yes, this also eliminates unnecessary http requests by validating client side. You should always do basic form validation client side.

callum.bennett Over a year ago

yep im going to do both.the code above is actually used to display certain fieldsets depending on whether a checkbox is ticked. if javascript is disabled then the fieldsets display automatically without the checkboxes.

Collectives™ on Stack Overflow

jquery php form validation checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related