如何在HTML中设置表单元素选中状态-html教程-PHP中文网

html 的 checked 和 selected 属性是控制表单默认选中的唯一可靠方式；js 赋值仅影响运行时状态，不改变默认值，且 form.reset() 会忽略它。

如何在html中设置表单元素选中状态

checked 和 selected 是 HTML 中控制表单元素“默认选中”的唯一可靠方式，JS 赋值只是运行时状态，刷新即丢、form.reset() 不认它。

浏览器根本不读 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></option> 有效，且只在 <select multiple></select> 下才允许多个高亮；单选 <select></select> 里写多个 selected，浏览器只认第一个。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

服务端返回的 HTML 必须确保：目标 <option value="xxx"></option> 真的带 selected，且 value 字符串与后端数据完全一致（空格、大小写、JSON 转义都要对得上）
React/Vue 中 HTML 的 selected 属性形同虚设，得靠数组绑定初始化，比如 v-model="selectedValues" 或 value={selected}
浏览器可能缓存用户上次手动选择，覆盖 HTML 的 selected，可加 autocomplete="off" 缓解

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', '')，后续行为不一致，尤其在重置表单时容易出错