设置单选框默认选中应直接使用checked布尔属性，仅需存在即可生效；同一组name值必须严格一致且全小写；服务端渲染时需动态判断添加checked。
直接在对应 <input type="radio"> 标签里加上 checked 属性就行。这是唯一标准、可靠且浏览器原生支持的方式。
用 checked 属性设置默认选中
它是一个布尔属性，只看是否存在，不看值是什么。只要写了，浏览器就认定为默认选中。
- ✅ 正确写法：
<input type="radio" name="level" value="high" checked> - ⚠️ 冗余但有效：
<input type="radio" name="level" value="mid" checked>或checked="" - ❌ 错误理解：
checked="false"依然会被选中——浏览器不解析它的值 - ? 不要遗漏：同一组（
name相同）中只能有一个带checked，否则只有第一个生效
确保 name 属性一致且准确
单选框的“单选”行为完全依赖 name 值。名字不同，互不影响；拼写差一个字母或大小写不一致，就算作两组。
- ✅ 同一组必须严格一致：
name="payment"和name="payment" - ❌ 无效分组：
name="payment"和name="Payment"（大小写敏感） - ? 建议用全小写、短横线连接，如
name="shipping-method"，避免歧义
服务端渲染或模板中动态加 checked
后端生成 HTML 时，别硬编码，要用逻辑判断决定哪个选项该加 checked。
- 例如在 Go 模板中：
<input type="radio" name="theme" value="dark" if eq .usertheme end> - 在 PHP 中可写：
<input type="radio" name="lang" value="zh" echo :>> - 关键点：确保最终输出的 HTML 中，仅一个同名 radio 含
checked属性
JavaScript 动态设置要注意的事
如果页面加载后才决定默认项（比如读取 localStorage），JS 可以操作，但需注意细节：
- 直接设
radio.checked = true是基础，但不会自动触发change事件 - 若业务逻辑依赖
change（如更新 UI、校验），得手动派发：radio.dispatchEvent(new Event('change', { bubbles: true })) - 更稳妥的做法是调用
radio.click()，它既选中又触发完整事件链 - 务必确认元素已挂载到 DOM，否则操作无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
