HTML复选框checked属性的信息冲突：MDN表述与测试结果不符？

MDN文档没有错误，浏览器也完全遵循规范，问题的核心是你混淆了HTML属性（attribute）和DOM对象属性（property）：

• HTML标签上的checked属性仅代表复选框的初始默认状态：它是页面加载时赋予元素的初始值，用户后续对复选框的勾选/取消操作，不会改变这个HTML属性的值。
• DOM元素的checked属性是实时反映的当前状态：你测试代码中通过document.querySelector('#test').checked获取的是DOM对象的property，它会随着用户的操作即时更新，所以能拿到当前的勾选状态。

可以用以下代码验证两者的区别：

<input type="checkbox" id="test">
<button type="button" onclick="console.log('当前状态（DOM property）:', document.querySelector('#test').checked);">打印当前状态</button>
<button type="button" onclick="console.log('HTML属性值:', document.querySelector('#test').getAttribute('checked'));">打印HTML属性</button>

测试后你会发现：

1. 初始未勾选时，getAttribute('checked')返回null；勾选复选框后，这个值依然是null。
2. 如果初始给复选框加上checked属性（<input type="checkbox" id="test" checked>），初始getAttribute('checked')返回'checked'，即使取消勾选，这个值也不会改变。

这完全符合MDN文档的描述——HTML的checked属性只对应默认状态，而非当前状态。

内容的提问来源于stack exchange，提问作者Ter Maxima