直接加checked属性即可选中，无需赋值；同一组单选按钮name必须完全一致；js设置需用click()触发事件；框架中应绑定数据而非手动设checked。
直接加 checked 属性是最简方式
浏览器只看 checked 属性是否存在，不解析它的值。写成 checked=""、checked="false" 甚至 checked="anything"，都会被当作已选中。
真正“不选中”，必须彻底删掉这个属性，不能留空或设为 false。
-
<input type="radio" name="mode" value="dev" checked>→ 有效选中 -
<input type="radio" name="mode" value="prod" checked>→ 依然选中（常见误写） -
<input type="radio" name="mode" value="test">→ 未选中（没写checked）
同一组必须共用完全相同的 name 值
单选逻辑靠 name 绑定，不是靠位置、样式或 class。大小写、空格、下划线差异都会导致分组失效。
一旦 name 不一致，多个 checked 可能同时生效，表单提交时会把所有“看似单选”的值都发出去，后端收一堆意外数据。
- ✅ 正确：
name="payment"和name="payment" - ❌ 错误：
name="payment"和name="Payment"（大小写不同） - ❌ 错误：
name="payment_method"和name="payment-method"（下划线 vs 短横线）
JS 动态设置 checked 时别漏掉事件触发
单纯赋值 radio.checked = true 只改了 DOM 属性，不会触发 change 事件。依赖该事件的校验、联动 UI 或提交逻辑全都不会执行。
更稳妥的做法是调用 click() 方法，它既选中控件，又走完整原生事件链。
- 优先用：
document.querySelector('input[value="dark"]').click() - 手动派发事件（如果必须用
checked = true）：radio.dispatchEvent(new Event('change', { bubbles: true })) - 注意：元素必须已挂载到 DOM，否则
click()无效
框架里默认选中要和绑定值严格对齐
React/Vue 中，checked 属性会被忽略，渲染完全由数据驱动。比如 Vue 的 :checked="value === 'admin'"，React 的 value={selectedRole} 配合 onChange。
最容易出问题的是服务端初始渲染（SSR）与客户端 hydration 不一致：HTML 里写了 checked，但 JS 初始化时绑定值没匹配上，浏览器会立刻“纠正”状态，导致闪动或默认值消失。
- Vue 模板中不要手写
checked，用v-model或:checked绑定 - React 中确保
valueprop 精确等于某个option的value字符串（包括空格和大小写） - SSR 场景下，前后端初始 state 必须完全一致，否则 hydration 失败
checked 就万事大吉，却没检查 name 是否拼错、是否在框架里混用了原生属性和受控逻辑、或者 JS 设置后忘了触发事件——这些地方一漏，表单就静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
