What is the proper way to check and uncheck a checkbox in HTML5?

Question

Looked at the HTML spec, but couldn't make heads or tails of it: http://www.w3.org/TR/html5/the-input-element.html#attr-input-checked

What is the correct way to check a checkbox in HTML (not dynamically)?

checked="true"
checked="checked"

What is the correct way to uncheck a checkbox?

<input type="checkbox" /> with no checked attribute
checked="false"
checked="none"

Where to check the HTML specification to check/uncheck a checkbox?

score 102 · Accepted Answer · edited May 13 '22 at 14:48

102

For checked state

Older browsers may need:

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

But nowadays simply do:

<input type="checkbox" checked />

For unchecked state

Remove checked attribute, like:

<input type="checkbox" />

Reference: http://www.w3.org/TR/html-markup/input.checkbox.html#input.checkbox.attrs.checked

edited May 13 '22 at 14:48

Top-Master

7,611
5
39
71

answered Oct 03 '12 at 01:10

valentinas

4,277
1
20
27

12

Or `` is checked as well. – B Seven Oct 03 '12 at 02:22
While, both are correct, my personal observation has been that `checked="checked"` accounts for mouse-event based check and uncheck, there as `checked` is programming based. – o12d10 Jul 19 '18 at 15:57
The link got broken, would you mind updating it? A citation inside your answer would be nice so that if the link gets broken again, those who read can see the explanation without further search – YakovL Oct 04 '18 at 21:10
At least we can back up this answer with https://www.w3schools.com/tags/att_input_checked.asp – YakovL Oct 04 '18 at 21:14
@ B Seven It's worthy an upvote – Alston Aug 04 '22 at 12:48

score 28 · Answer 2 · answered Oct 03 '12 at 08:42

According to HTML5 drafts, the checked attribute is a “boolean attribute”, and “The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.” It is the name of the attribute that matters, and suffices. Thus, to make a checkbox initially checked, you use

<input type=checkbox checked>

By default, in the absence of the checked attribute, a checkbox is initially unchecked:

<input type=checkbox>

Keeping things this way keeps them simple, but if you need to conform to XML syntax (i.e. to use HTML5 in XHTML linearization), you cannot use an attribute name alone. Then the allowed (as per HTML5 drafts) values are the empty string and the string checked, case insensitively. Example:

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

score 8 · Answer 3 · answered Oct 03 '12 at 01:07

8

<input type="checkbox" checked />

HTML5 does not require attributes to have values

answered Oct 03 '12 at 01:07

secretformula

6,414
3
33
56

11

Actually, this is not an answer, they asked "What is the correct way to *uncheck* a checkbox?" – YakovL Dec 20 '17 at 12:22

score 6 · Answer 4 · answered Jan 30 '14 at 18:07

6

In jQuery:

To check the checkbox:

$("#checkboxid").attr("checked","checked");

To uncheck the checkbox:

$("#checkboxid").removeAttr("checked");

The other answers hint at the solution and point you to documentation that after further digging will get you to this answer. Jukka K. Korpela has the reason this is the correct answer, basically I followed his link and then looked up the jQuery docs to get to that result. Just figured I'd save future people who find this article those extra steps.

answered Jan 30 '14 at 18:07

Robert

85
1
2

1

You should use .prop(), not .attr() – quentin-starin May 06 '14 at 21:23
1

.attr() is not working and setAttribute complains after you remove the attribute by removeAttr. what worked for me was: https://www.w3schools.com/jsref/prop_checkbox_checked.asp – mCasamento May 05 '20 at 08:05

score 6 · Answer 5 · answered Mar 06 '19 at 05:56

6

you can use autocomplete="off" on parent form, so if you reload your page, checkboxes will not be checked automatically

answered Mar 06 '19 at 05:56

N1gthm4r3

755
1
11
23

score 5 · Answer 6 · answered Apr 02 '14 at 09:08

Complementary answer to Robert's answer http://jsfiddle.net/ak9Sb/ in jQuery

When getting/setting checkbox state, one may encounter these phenomenons:

.trigger("click");

Does check an unchecked checkbox, but do not add the checked attribute. If you use triggers, do not try to get the state with "checked" attribute.

.attr("checked", "");

Does not uncheck the checkbox...

score 5 · Answer 7 · edited Dec 16 '21 at 15:25

5

I'm not entirely sure why this hasn't been mentioned before, but for me, the following works:

To set it to checked:

<input type="checkbox" checked>

To set it to unchecked:

<input type="checkbox" unchecked>

(I was having the problem that checkboxes remained checked after reloading the page. Using unchecked solved my problem, so it might be useful to someone else.)

edited Dec 16 '21 at 15:25

ikhvjs

5,316
2
13
36

answered Mar 20 '21 at 15:33

ATJ

309
2
10

Worked! if (in_array($row["ID"], $array)) $m = 'checked'; else $m = 'unchecked'; } – Clark Superman Aug 23 '21 at 11:02

score 4 · Answer 8 · answered Oct 03 '12 at 01:10

4

You can refer to this page at w3schools but basically you could use any of:

<input checked>
<input checked="checked">
<input checked="">

answered Oct 03 '12 at 01:10

Bruno Vieira

3,884
1
23
35

Yes they are, try and you'll see – Bruno Vieira Oct 03 '12 at 01:27
12

Actually, this is not an answer, they asked "What is the correct way to *uncheck* a checkbox?" – YakovL Dec 20 '17 at 12:22

score 1 · Answer 9 · edited Dec 21 '17 at 14:03

1

<form name="myForm" method="post">
  <p>Activity</p> 
  skiing:  <input type="checkbox" name="activity" value="skiing"  checked="yes" /><br /> 
  skating: <input type="checkbox" name="activity" value="skating" /><br /> 
  running: <input type="checkbox" name="activity" value="running" /><br /> 
  hiking:  <input type="checkbox" name="activity" value="hiking"  checked="yes" />
</form>

edited Dec 21 '17 at 14:03

YakovL

7,557
12
62
102

answered Oct 03 '12 at 01:09

Michael Durrant

93,410
97
333
497

What is the proper way to check and uncheck a checkbox in HTML5?

9 Answers9

For checked state

For unchecked state

Linked