37

I've seen the three implementations of pre-selecting a checkbox. I started off using checked="checked" because I thought it was the "proper" way (never did like the "checked"="yes" however). I am thinking of changing to checked="true" as it seems more readable and is easier to code the JavaScript. Note that this same question applies to other attributes such as "disabled"="disabled" versus "disabled"="true". As long as I am consistent, is using "true" the preferred approach? Thank you

<input type="checkbox" checked="checked" value="123" name="howdy" />
<input type="checkbox" checked="true"    value="123" name="howdy" />
<input type="checkbox" checked="yes"     value="123" name="howdy" />
Praveen Mitta
  • 1,408
  • 2
  • 27
  • 48
user1032531
  • 24,767
  • 68
  • 217
  • 387
  • What about $('input[name=foo]').attr('checked', true);? Should it really be $('input[name=foo]').attr('checked', 'checked')? – user1032531 May 31 '12 at 12:08

2 Answers2

62

Only checked and checked="checked" are valid. Your other options depend on error recovery in browsers.

checked="yes" and checked="true" are particularly bad as they imply that checked="no" and checked="false" will set the default state to be unchecked … which they will not.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 4
    [HTML 5 spec](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attribute). – Felix Kling May 31 '12 at 11:29
  • Sorry, meant to add it here... What about $('input[name=foo]').attr('checked', true);? Should it really be $('input[name=foo]').attr('checked', 'checked')? – user1032531 May 31 '12 at 12:09
  • It should be `jQuery(selector).prop('checked', true);` (`attr` is inconsistent on how it handles the checked attribute so should be avoided for the sake of maintainers' brains). – Quentin May 31 '12 at 12:12
  • Really, `checked="checked"` seems equally bad as it might imply that `checked="not-checked"`, or some derivative of equally implies unchecked. Really it is a set/notset issue. – user1032531 Jan 05 '17 at 02:39
3

Accordingly to W3C checked input's attribute can be absent/ommited or have "checked" as its value. This does not invalidate other values because there's no restriction to the browser implementation to allow values like "true", "on", "yes" and so on. To guarantee that you'll write a cross-browser checkbox/radio use checked="checked", as recommended by W3C.

disabled, readonly and ismap input's attributes go on the same way.

EDITED

empty is not a valid value for checked, disabled, readonly and ismap input's attributes, as warned by @Quentin

Flavio Cysne
  • 1,436
  • 8
  • 8
  • No. It says that the checked attribute can be omitted or it can have the value 'checked'. That does invalidate every other value (HTML only lets you use things that are permitted, it doesn't let you use everything that isn't forbidden). Since it is a boolean attribute, you can omit everything *except* the value while having the attribute present. i.e. Given `checked="checked"` you can commit the first 9 characters and the last character). – Quentin May 31 '12 at 12:22
  • I said that this does not invalidate other values 'cause **browsers** could implement their way to parse html as they want since they accept an ommited/absent checked attribute or checked="checked" as **recommended** by W3C. I accept the negativation 'casue "empty" isn't valid value, but everything else still applies. – Flavio Cysne May 31 '12 at 12:41