单选按钮默认选中仅由HTML中checked属性存在与否决定，与属性值无关；同组name必须完全一致且唯一checked；JS设置checked不触发change事件，需手动触发或调用click()。
单选按钮默认选中只认 checked 属性存在与否
浏览器在解析 HTML 时，只要看到 input[type="radio"] 标签里有 checked 这个单词，不管它后面有没有等号、值是 "true" "false" 还是空字符串，都会当作默认选中处理。
常见错误现象：checked="false" 看起来像“不选中”，实际仍被选中；checked="" 或 checked="checked" 都有效，但后者冗余，部分旧浏览器可能误判。
-
checked是布尔属性，写上即生效，不依赖值内容 - 服务端模板渲染时，避免直接拼接
checked="{{ $value }}"，否则可能输出checked="0"导致意外选中 - 推荐用条件判断控制是否插入该属性：
<input type="radio" name="mode" value="dark" {{ if .DarkMode }}checked{{ end }}>
同组单选按钮必须共用完全一致的 name，且仅一个带 checked
name 值区分大小写、不可含空格或前后空格，比如 name="theme" 和 name="Theme" 是两组，会导致多个 checked 同时生效，表单提交时后端可能收到多个同名字段。
浏览器虽会强制只采纳第一个（或最后一个）checked，但这是 HTML 合法却语义错误的行为，容易引发逻辑混乱。
立即学习“前端免费学习笔记（深入）”；
- 同一
name下多个checked：HTML 允许，但行为不可靠，应杜绝 - 漏写
name或拼错：单选组失效，用户可多选，提交数据异常 - Vue/React 中建议用数据绑定代替手写
checked，例如:checked="value === 'pro'"，更易维护
JS 动态设置 checked 不等于设置“默认值”
element.checked = true 只改变当前运行时状态，不影响表单重置（form.reset()）后的初始值，刷新页面也会丢失。真正决定“默认”的，永远是 HTML 中是否写了 checked。
常见错误现象：DOM 加载后用 JS 设置 checked = true，但 change 事件没触发，后续校验或 UI 更新没执行。
- 单纯赋值
radio.checked = true不会触发change事件，需手动dispatchEvent(new Event('change', { bubbles: true })) - 更稳妥的做法是调用
radio.click()，它既选中又触发原生事件链 - 操作前务必确认元素已挂载，否则报
Cannot set property 'checked' of null
取消单选按钮选中要绕过浏览器限制
单选组必须有且仅有一个选中项，所以不能对唯一可选的 radio 直接设 .checked = false——浏览器会忽略这个操作。
想实现“清空选择”，本质是让组内至少还有一个其他可选项，并主动选中它；或者加一个“无偏好”选项作为兜底。
- 不能用
removeAttribute('checked')来取消，默认状态由 HTML 属性决定，DOM 属性和 JS 属性不同步 - 若需“全部取消”视觉效果，标准 HTML 不支持无选中态，得用
select或 checkbox 模拟 - 获取当前选中值最稳写法：
document.querySelector('input[name="xxx"]:checked')?.value，比遍历所有再判断快且安全
最容易被忽略的是：checked 决定的是初始状态，而用户交互后的状态变化必须靠事件监听和数据同步来维持；服务端只认提交时的 value，从不关心谁“默认”了。
