HTML 的 checked 和 selected 属性是控制表单默认选中的唯一可靠方式；JS 赋值仅影响运行时状态，不改变默认值，且 form.reset() 会忽略它。
checked 和 selected 是 HTML 中控制表单元素“默认选中”的唯一可靠方式，JS 赋值只是运行时状态，刷新即丢、form.reset() 不认它。
radio/checkbox 默认选中只看 checked 是否存在
浏览器根本不读 checked 的值，checked="true"、checked=""、checked 效果完全一样——只要这个单词出现在标签里，就默认勾选。
- 同一组
radio必须共用严格一致的name（大小写、空格、下划线都不能差），且仅一个带checked；否则多个都显示选中，提交时全发出去 -
checkbox没有互斥限制，多个可同时加checked，各自独立生效 - 模板引擎（如 Django、EJS）别拼字符串：
checked="{{ user.is_subscribed }}"可能渲染出checked="0"，结果还是选中；应改用条件逻辑决定是否插入整个checked属性 - CSS 自定义样式（比如
opacity: 0隐藏原生控件）仍必须依赖checked触发伪类:checked，删了它视觉就断连
selected 属性只对 <option> 有效，且只在 <select multiple> 下才允许多个高亮；单选 <select> 里写多个 selected，浏览器只认第一个。
- 服务端返回的 HTML 必须确保：目标
<option value="xxx">真的带selected，且value字符串与后端数据完全一致（空格、大小写、JSON 转义都要对得上） - React/Vue 中 HTML 的
selected属性形同虚设，得靠数组绑定初始化，比如v-model="selectedValues"或value={selected} - 浏览器可能缓存用户上次手动选择，覆盖 HTML 的
selected，可加autocomplete="off"缓解
JS 动态设置选中状态的坑点
JS 改的是当前 DOM 状态，不是“默认”——form.reset() 后它会回到 HTML 初始值，不是你 JS 设的那个。
立即学习“前端免费学习笔记（深入）”；
-
element.checked = true或option.selected = true不触发change事件，需手动dispatchEvent(new Event('change', { bubbles: true })) - 动态创建的元素（
document.createElement或innerHTML插入）必须先挂载到 DOM，再设.checked或.selected，否则赋值无效 -
select.value = "xxx"匹配失败时 UI 不变、不报错；select.selectedIndex = 2更稳定，但会忽略 value 内容，适合结构固定场景 - 不要用
setAttribute('checked', '')，后续行为不一致，尤其在重置表单时容易出错
最容易被忽略的是：所有“默认”都由 HTML 属性决定，而不是 JS 或框架状态；哪怕你用 Vue 的 v-model 绑定，如果初始数据没同步进 HTML 的 checked 或 selected，页面首次加载时就会闪一下、或直接不生效。
