What is the syntax for boolean attributes, e.g. a checked checkbox, in HTML?

Question

Sounds like a bit of a silly question, but I am wondering what is the best way of stating that a checkbox is checked/unchecked in HTML.

I have seen many different examples:

<input type="checkbox" checked="checked" />
<input type="checkbox"  />

<input type="checkbox" checked="yes" />
<input type="checkbox" checked="no" />

<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />

Which browsers work with which ones of these, and most importantly, does jQuery figure out which box is checked in all 3?

Edit: The W3C spec seems to imply that just the checked attr being there is correct. Does that mean that checked="false" and checked="no" will still check the box though?

Answer 1

In HTML:

<input type="checkbox" checked>
<input type="checkbox" checked="checked">

For XHTML you have to use attribute/value matching pairs:

<input type="checkbox" checked="checked" />

Answer 2

HTML:

Any of them should be the right one as they say on W3C page. checked attribute just has to be set.

As I wrote in Coronatus' comment:

In fact, it doesn't matter if it's checked, checked="whatever" or checked="checked". It's checking boolean value, so it's either true (set) or false (not set).

XHTML:

You have to specify it, so checked="checked" is the only valid one. Most of the browsers will probably parse HTML values correct, but you'll have error on your page nonetheless.

Answer 3

According to the HTML spec, the correct one is:

<input type="checkbox" checked />
<input type="checkbox" />

I use this and jQuery works perfectly with them.

Answer 4

A quick test reveals that jQuery equates any value set to being checked.

alert( $('input:checked').length );
// Returns 5

Even an empty string and the negative values.

Answer 5

According to W3C recommendations your first suggestion is correct.

Answer 6

The presence of the "checked" property specifies the status. The value is irrelevant/not needed.

<input type="checkbox" checked="checked" />
<input type="checkbox"  />

is my suggestion

Answer 7

I would be careful using it on chrome, firefox and opera. Chorme seems to have a problem with checkboxes showing up, Firefox is case sensitive with styles and tags, and opera seems to run fine but is slow at updating. Might just be the versions of the browsers being used.

Other than that I believe that it should run <input type="checkbox" checked /> just fine in all of them. The only difference really is how the individual browsers appear to show the content on the page.

Answer 8

The W3C spec seems to imply that just the checked attr being there is correct. Does that mean that checked="false" and checked="no" will still check the box though?

Exactly. That's why it's a bad idea to use checked="true" and checked="yes", they imply that checked="false" and checked="no" will not check the box.

Answer 9

HTML5 spec:

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes :

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

Conclusion:

Let boolean be a boolean attribute of tag tag, like checked and <input type="checkbox".

The following are valid, equivalent and true:

<tag boolean />
<tag boolean="" />
<tag boolean="boolean" />
<tag boolean="BoOlEaN" />

The following are invalid:

<tag boolean="0" />
<tag boolean="1" />
<tag boolean="false" />
<tag boolean="true" />

The absence of the attribute is the only valid syntax for false:

<tag />

Recommendation

If you care about writing valid XHTML, use boolean="boolean", since <tag boolean> is invalid XHTML (but valid HTML) and other alternatives are less readable. Else, just use <tag boolean> as it is shorter.