Html Question posted in
Some basic documentation can be found here.

Conflicting information about HTML checkbox's "checked" attribute

According to this MDN article, the checked attribute of a checkbox only indicates whether a checkbox is ticked by default, and not its current state.

However, very basic testing reveals it does reflect the checkbox’s current state :

<input type="checkbox" id="test">
<button type="button" onclick="console.log(document.querySelector('#test').checked);">Test</button>

Is the MDN article wrong, or are browsers simply not conforming with the specification here ?

Tags:

2

Answers


  1. 0

    The article clarifies that the HTMLInputElement‘s checked value does update with state, which you can read more about here.

    With that said, I have no idea how to explain the difference between these concepts, and am not sure I even understand it myself. Any more clarity is welcome!

    Login or Signup to reply.
  2. 0

    The MDN article is correct. It discusses the checked attribute, whereas your sample code accesses the checked property. The following example demonstrates the difference between the checked attribute and the checked property:

    <input type="checkbox" id="test" checked="checked">
<button type="button" onclick="console.log(document.querySelector('#test').getAttribute('checked') ?? 'null');">Log Attribute</button>
<button type="button" onclick="console.log(document.querySelector('#test').checked);">Log Property</button>

    The Log Attribute button logs the initial state (where any non-null string means "checked"), and the Log Property button logs the current state.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search