ChatGPT解决这个技术问题 Extra ChatGPT

What's the proper value for a checked attribute of an HTML checkbox?

We all know how to form a checkbox input in HTML:

<input name="checkbox_name" id="checkbox_id" type="checkbox">

What I don't know -- what's the technically correct value for a checked checkbox? I've seen these all work:

Is the answer that it doesn't matter? I see no evidence for the answer marked as correct here from the spec itself:

Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set. When a form is submitted, only "on" checkbox controls can become successful. Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same property. The INPUT element is used to create a checkbox control.

What would a spec writer say is the correct answer? Please provide evidence-based answers.

In your question summary you mention value for the checked attribute, however in the question description you discuss the correct value for a checked checkbox. The "value" of the checkbox is different from the checked attribute, I believe in your question description you also meant the attribute's value, perhaps you'd like to adjust the question description. For the "value" of a checkbox review stackoverflow.com/questions/14323899/…

1
13 revs, 2 users 90%

Strictly speaking, you should put something that makes sense - according to the spec here, the most correct version is:

<input name=name id=id type=checkbox checked=checked>

For HTML, you can also use the empty attribute syntax, checked="", or even simply checked (for stricter XHTML, this is not supported).

Effectively, however, most browsers will support just about any value between the quotes. All of the following will be checked:

<input name=name id=id type=checkbox checked>
<input name=name id=id type=checkbox checked="">
<input name=name id=id type=checkbox checked="yes">
<input name=name id=id type=checkbox checked="blue">
<input name=name id=id type=checkbox checked="false">

And only the following will be unchecked:

<input name=name id=id type=checkbox>

See also this similar question on disabled="disabled".


This is wrong. If you look at the spec, it says: checked (checked) which means "The checked attribute can have the value 'checked'). Only checked is an acceptable value, none of the others are. Boolean attributes allow you to omit everything except the value so checked is acceptable as well as checked="checked".
A HTML5-orientated W3 page says that checked, checked="", and checked="checked" are OK. w3.org/TR/html-markup/input.checkbox.html
@Quentin I apologize, that sentence doesn't make sense to me. Did you mean you can omit everything except the name of the attribute? Because if you could omit everything but the value, you could simply write "checked", without the attribute name, and have it work correctly.
@Quentin tl,dr: It is semantics, but empty attribute syntax specifies only the name of the attribute, not the value.
If the checkbox stays checked (when reloading the page) despite omitting the boolean / empty attribute checked, use autocomplete="off" to keep your browser from automatically checking it.
C
Community

HTML5 spec:

http://www.w3.org/TR/html5/forms.html#attr-input-checked :

The disabled content attribute is a boolean attribute.

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:

The following are valid, equivalent and true:

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

The following are invalid:

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

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

<input />

Recommendation

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


I've decided to roll back to edit 2 and keep the spec first. While Examples first is the way to go in general, I feel that this is the differentiating aspect of this answer with respect to the current top ones which give just examples. Thanks for the suggestion though :-)
I think this is the correct answer, emphasizing that the absence means false. While ="true" works, that implies that ="false" would work as desired and it doesn't.
N
Niet the Dark Absol
<input ... checked />
<input ... checked="checked" />

Those are equally valid. And in JavaScript:

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");

setAttribute modifies the DOM markup, the property assignment need not need to.
input.setAttribute("checked") TypeError: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present
@IvanRave Some browsers are pedantic about that, others will work fine.
J
Johnny Craig

you want this i think: checked='checked'


w
wengeezhang

checked checked="" checked="checked" are equivalent;

according to spec checkbox '----ⓘ checked = "checked" or "" (empty string) or empty Specifies that the element represents a selected control.---'


A
Alexander Mills

It's pretty crazy town that the only way to make checked false is to omit any values. With Angular 1.x, you can do this:

  <input type="radio" ng-checked="false">

which is a lot more sane, if you need to make it unchecked.


J
J_sdev

I think this may help:

$('mycheckbox')[0].checked

Secondly, you need to be aware that the checked attribute RETURNS a string "true", "false"
Why is this important? Because you need to use the correct Type. A string, not a boolean. This also important when parsing your checkbox.
$('mycheckbox')[0].checked = "true"

if($('mycheckbox')[0].checked === "true"){ //do something }

You also need to realize that the "checked" ATTRIBUTE is for setting the value of the checkbox initially. This doesn't do much once the element is rendered to the DOM. Picture this working when the webpage loads and is initially parsed.
I'll go with IE's preference on this one: <input type="checkbox" checked="checked"/>

Lastly, the main aspect of confusion for a checkbox is that the checkbox UI element is not the same as the element's property value. They do not correlate directly. If you work in .net, you'll discover that the user "checking" a checkbox never reflects the actual bool value passed to the controller. To set the UI, I use both $('mycheckbox').val(true); and $('mycheckbox').attr('checked', 'checked');

$('mycheckbox')[0].checked = "true";

$('mycheckbox').val(true);

$('mycheckbox').attr('checked', 'checked');


B
Battledoosh

Just like all input's, this one also has a 'value' attribute. If you set the value attribute along with the name attribute, it will send ${name}=${value} in the headers. Let's say we had a form with a bunch of stuff and we wanted the user to decide what roles they have, we could use a checkbox. The easiest way is to set the 'value' attribute which will be passed along to the server. Like this:

<form action="/server" method="post">
    <label>Are you a person?</label>
    <input type="checkbox" name="my_checkbox" value="is_person">
</form>

The server will receive the following: my_checkbox=is_person but only if the checkbox is checked. This would be my_checkbox= if it is empty.

This is the exact same with radio inputs.

But.. I have a feeling this isn't what you're asking for... So just encase I'll write another answer below:

If the checked attribute is set to anything (even false) it will be activated, no matter what. The checked attribute doesn't have a specified value, if it's set to anything it will default to 'true' (even if you set it to false).

For example:

<form action="/server" method="post">
    <label>Are you a person?</label>
    <input type="checkbox" checked="false"> <!--Still checked-->
</form>

Will be checked even though it's set to false.

<form action="/server" method="post">
    <label>Are you a person?</label>
    <input type="checkbox" checked="asjdiasjiasdjoasi"> <!--Still checked-->
</form> 

Doing this will also check it. It doesn't matter -- as long as it's set it will be checked.

Hope this answers your question, the checked attribute will check the input no matter the value of the attribute.

You can test it here: https://battledash-2.github.io/Live-IDE/ or anywhere like repl.it, or locally.


H
Hamilton Lumati

The technically correct value for a checked checkbox is zero (0), and when the checkbox is not checked, it's index is not defined.


A
Austin Best

Well, to use it i dont think matters (similar to disabled and readonly), personally i use checked="checked" but if you are trying to manipulate them with JavaScript, you use true/false


No. It does matter (it matters for disabled and readonly too) even if browser error recovery is pretty good. If you want to manipulate the attribute with JS then you should still use checked or removeAttribute('checked'). The checked property takes true or false.