What is the syntax for 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

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 2

According to W3C recommendations your first suggestion is correct.

Answer 3

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 4

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 5

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 6

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 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.