What's the Proper Value For a Checked Attribute of an HTML Checkbox

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

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

What does the value attribute mean for checkboxes in HTML?

I hope I understand your question right.

The value attribute defines a value which is sent by a POST request (i.e. You have an HTML form submitted to a server).
Now the server gets the name (if defined) and the value.

<form method="post" action="urlofserver">
    <input type="checkbox" name="mycheckbox" value="1">Is it worth?</input>
</form>

The server would receive mycheckbox with the value of 1.

in PHP, this POST variable is stored in an array as $_POST['mycheckbox'] which contains 1.

What values for checked and selected are false?

There are no values that will cause the checkbox to be unchecked. If the checked attribute exists, the checkbox will be checked regardless of what value you set it to.

<input type="checkbox" checked /><input type="checkbox" checked="" /><input type="checkbox" checked="checked" /><input type="checkbox" checked="unchecked" /><input type="checkbox" checked="true" /><input type="checkbox" checked="false" /><input type="checkbox" checked="on" /><input type="checkbox" checked="off" /><input type="checkbox" checked="1" /><input type="checkbox" checked="0" /><input type="checkbox" checked="yes" /><input type="checkbox" checked="no" /><input type="checkbox" checked="y" /><input type="checkbox" checked="n" />

Checkbox is checked even though checked=false

Setting checked attribute to false won't work.

If checked attribute is present on the input element, it doesn't matters what boolean value you give it, input element will always be checked. To make the input element unchecked, you have to remove the checked attribute.

To uncheck the checkbox input element via javascript, you can remove the checked attribute using removeAttribute() method.

Following code snippet unchecks the checkbox after 2 seconds via javascript.

const checkInput = document.querySelector('#dateCheckbox');

setTimeout(() => {
  checkInput.removeAttribute('checked');
}, 2000);

<input type="checkbox" id="dateCheckbox" checked>
<label for="dateCheckbox"> Keinen Zeitraum angeben</label>

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

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

Do checkbox inputs only post data if they're checked?

Yes, standard behaviour is the value is only sent if the checkbox is checked. This typically means you need to have a way of remembering what checkboxes you are expecting on the server side since not all the data comes back from the form.

The default value is always "on", this should be consistent across browsers.

This is covered in the W3C HTML 4 recommendation:

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.

Can we use a method on [checked] property of checkbox to set it to true/false

i know what the issue is. Instead of your code, use the following.

let checked = false;
this.style.value.forEach(style => {
if (style == id) checked = true;
});
return checked;

How o force the user to select a single checkbox with HTML?

With fieldset:

<fieldset id="question1">
<legend>Question 1:</legend>
    <input type="radio" value="value1" name="question1">Answer 1</input>
    <input type="radio" value="value2" name="question1">Answer 2</input>
</fieldset>
<fieldset id="question2">
<legend>Question 2:</legend>
    <input type="radio" value="value1" name="question2">Answer 1</input>
    <input type="radio" value="value2" name="question2">Answer 2</input>
</fieldset>

What's the Proper Value For a Checked Attribute of an HTML Checkbox