jQuery val() and checkboxes

Question

Is there some rationale for val() being useless for checkbox controls, whereas it is useful for getting input data consistently across every other input control?

e.g. for checkboxes, at appears to always return "on" regardless of the checkbox state. For other input controls that don't actually have a "value" attribute, e.g. select and textarea, it behaves as you would expect. See:

http://jsfiddle.net/jamietre/sdF2h/4/

I can't think of a good reason why it wouldn't return true or false. Failing that, at least return "on" only when checked, and an empty string when not. Failing that, at least always return an empty string, given that checkboxes have no value attribute!

Obviously I know how to get the value using attr, but here's the situation. I am developing a simple (so far anyway) C# jQuery implementation to do HTML parsing on the server, and I am trying to be completely faithful to jQuery's implementation so it behaves consistently on either the client or server against the same DOM. But this just seems stupid and I'm having a hard time getting myself to actually code "value" to return "ON" for a checkbox no matter what. But if I don't, it won't be consistent. So I'm trying to understand, is there some reason for doing this? Does it serve some purpose, or is it simply an artifact of some kind? Would anyone ever use the val() method against a checkbox, if so, why? If not, why did the jQuery architects decide on this approach to make it not useful?

Answer 1

I can't think of a good reason why it wouldn't return true or false. Failing that, at least return "on" only when checked, and an empty string when not. Failing that, at least always return an empty string, given that checkboxes have no value attribute!

Checkboxes do have a value attribute. It's quite common to use it in eg. multi-checkboxes in forms, for example:

<input type="checkbox" name="foo[]" value="1" /> <input type="checkbox" name="foo[]" value="2" /> 

Then when user submits the form, the server can parse which of the checkboxes were checked by checking the values of the foo[] array. The value of the checkbox does not change whether it is checked or not; the browser simply does not send the values of unchecked checkboxes to the server. If you do eg. $('#your-form').serialize()in jQuery, it should work similarly; it shouldn't include values of unchecked checkboxes. If you omit the value from checkbox, it simply defaults to on.

If you want to check whether an individual checkbox is checked or not in jQuery, the best most descriptive way is to do $(this).is(':checked')