核心提炼：checked属性只负责“初始默认值”，它是一个“布尔属性”，写上即生效。真正的“选中状态”，由Ja vaScript的
.checked属性或前端框架的响应式数据说了算。表单提交时，浏览器也只会带走当前真正被选中的项。
HTML 中 checked 属性怎么写才真正生效
想要复选框或单选框在页面一打开就默认选中？方法其实再简单不过：在 或 标签里，直接加上 checked 这个单词就行。这就是所谓的布尔属性，它的存在本身就是“真”，不需要给它赋值。所以，别再费力写成 checked="true" 或 checked="checked" 了——虽然浏览器为了兼容性多半也能理解，但这在规范上是不严谨的。
不过，你可能会遇到一种尴尬局面：代码里明明写上了 checkedelement.checked = false，或者你用了Vue、React这类前端框架，它们接管了表单的状态控制，导致HTML的原生属性在初始化之后就被忽略了。
- 记住这个原则：
checked属性只管初次渲染的“亮相”。一旦页面动起来，后续的状态切换就交由Ja vaScript的.checked属性或者框架的数据状态来决定。 - 对于
radio单选框组，务必保证同组选项的name属性一致。否则，每个checked都会独立生效，单选逻辑也就失效了。 - 在后端模板语言（比如Django、Thymeleaf）中动态生成页面时，要格外小心字符串拼接的逻辑错误。万一拼接失误导致
checked属性没能正确输出到HTML里，默认选中自然也就无从谈起。
JS 动态设置 checked 状态的正确方式
当你需要用Ja vaScript来操控选框的选中状态时，请务必绕开一个常见的误区：别再去操作 setAttribute('checked', '') 了。这个方法只改变了HTML标签上的属性，并不会实际更新DOM元素的选中状态，对表单提交的数据也毫无影响。
正确的做法是直接读写DOM元素的 .checked 属性：
// 设置一个复选框为选中
document.getElementById('my-checkbox').checked = true;
// 选中一个特定值的单选框
document.querySelector('input[name="gender"][value="female"]').checked = true;
这里有几点关键细节需要留意：
.checked是一个布尔类型的DOM属性，它接受的是true或false，不是字符串。- 对于单选框组，当你将其中一个的
.checked设为true时，浏览器的原生行为会自动将同组其他选项设为false，非常省心。 - 如果元素是刚刚用
createElement创建的，还没有被添加到页面的DOM树中，请先完成append操作再给.checked赋值，否则操作可能不生效。
Vue / React 中为什么 checked 属性失效
在Vue或React这类现代前端框架中，表单控件被“数据驱动”的理念接管了。原生的 checked 属性在初始化时可能会被框架读取，但随后的所有状态变更都会严格受框架的数据状态控制。因此，如果你还用纯HTML的思维去设置它，多半会碰壁。
在Vue中，你应该使用 v-model 这个指令来实现双向绑定。对于复选框，它绑定一个布尔值；对于单选框，它绑定一个代表选中值的字符串或数字。在React中，你需要使用受控组件的模式，即通过 checked 属性传递一个状态值，并通过 onChange 事件来更新这个状态。
典型的“翻车”现场包括：
- 在Vue模板里同时写了
checked属性和v-model。结果是v-model绑定的数据完全主宰了状态，checked属性被无情忽略。 - 在React中，只给单选框设置了
checked={value === 'a'}，却没有提供onChange事件处理函数。这会导致选框变成一个“只读”状态，用户怎么点击都无法改变它的选中状态。 - 通过异步请求获取初始数据，但状态数据初始值为
undefined或null，导致选框在首次渲染时未能按预期选中。
表单提交时 checked 状态怎么影响数据
这是直接影响后端接收数据的环节。规则很明确：只有那些当前状态为 checked === true 的复选框或单选框，它们的 name 和 value 才会被包含在表单提交的数据中（比如 FormData 或传统的查询字符串）。那些没有被选中的控件，无论它在HTML中是否声明了 checked 属性，都会从提交的数据中“消失”。
几个值得警惕的细节：
- 如果一个复选框没有选中，它在提交的数据中对应的字段会完全缺席，而不是发送一个空值。
- 如果一个单选框组的任何一个选项都没有被选中，那么提交时这个
name对应的字段压根不会出现在请求体中。后端处理时需要进行相应的空值或默认值处理。 - 当你使用
new FormData(formElement)API来收集表单数据时，它捕获的是DOM元素此刻的真实状态，与HTML标签上原始的checked属性无关。
总得来说，实现默认选中这个需求，从HTML到Ja vaScript再到前端框架，每一层都有自己的“话语权”。最容易被忽略的恰恰是权力的交接点：HTML的 checked 属性只管第一次，之后的舞台，永远属于动态的Ja vaScript数据和状态管理。理顺了这个关系，踩坑的几率就会大大降低。
