在html中设置单选框默认选中，最直接有效的方式是在对应标签里添加checked属性；该属性为布尔型，只要存在即生效，无需赋值，浏览器仅依据其存在与否决定初始状态。
在HTML中设置单选框默认选中，最直接有效的方式就是在对应 `` 标签里添加 checked 属性。这个属性是布尔型的，只要存在，浏览器就会把它当作“已选中”处理，无需赋值，也不看值的内容。
用 checked 属性设默认项
这是唯一标准、最可靠的方法。浏览器在解析HTML时，仅依据该属性是否存在来决定初始状态。
-
<input type="radio" name="level" value="basic" checked> 基础✅ 页面一打开就选中“基础” -
<input type="radio" name="level" value="pro" checked> 高级❌ 尽管写了 "false"，依然被选中（浏览器只认属性存在与否） -
<input type="radio" name="level" value="expert" checked> 专家✅ 空字符串也生效
确保同组只有一个默认项
同一组单选按钮必须使用相同的 name 属性，而其中只能有一个带 checked。否则：
- HTML语法上允许多个 checked，但浏览器只采纳第一个出现的，后面的会被忽略
- 容易引发逻辑混乱，比如模板渲染时未做排他判断，导致两个都加了 checked
- 服务端或前端框架（如Vue/React）建议用数据绑定控制，例如
:checked="value === 'pro'"，更安全可控
JavaScript 动态设置要注意时机
JS 赋值 radio.checked = true 可以改变选中状态，但不能替代 HTML 的 checked 属性来定义“初始默认值”：
- DOM 渲染完成前，JS 设置可能被 HTML 属性覆盖；渲染完成后设置才真正起效
- 想让某个单选框“初始就选中”，必须写在 HTML 里加
checked，而不是靠 JS 在DOMContentLoaded后补 - 取消选中要谨慎：若它是当前组唯一可选的 radio，
.checked = false会被浏览器忽略（因为单选组必须有且仅有一个选中项）
别忘了搭配 label 提升可用性
单独放 input 不够友好，建议用 <label></label> 包裹或通过 for 关联，让用户点击文字也能触发选择：
<label><input type="radio" name="theme" value="light" checked> 浅色模式</label>- 或：
<input type="radio" name="theme" value="dark" id="dark"><label for="dark">深色模式</label>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
