直接写checked即可生效，浏览器只认属性是否存在而非其值；同一组单选框必须name完全一致（大小写、空格敏感）才能互斥；JS动态设置应操作.checked属性并手动清空同组其他项，避免用setAttribute。
直接写 checked 就生效，别加等号和值
页面加载时默认选中某个单选框，最简单可靠的方式就是在对应 <input type="radio"> 标签里直接写 checked 这个属性，不带等号、不带引号、不带任何值。浏览器只看这个属性是否存在，存在就选中。
常见错误是写成 checked="true"、checked="checked" 或 checked="false"——这些都会被当作“属性存在”，结果还是选中。真正要避免默认选中，就得彻底删掉 checked 这个词。
-
<input type="radio" name="mode" value="auto" checked>→ 正确，加载即选中 -
<input type="radio" name="mode" value="manual" checked="false">→ 错误，依然选中 -
<input type="radio" name="mode" value="off">→ 正确，未选中
同一组必须共用完全一致的 name 值
单选框的“单选”逻辑靠的是 name 属性。只有 name 完全相同（大小写、空格、符号都算差异）的一组 <input type="radio"> 才能互斥。如果 name 不一致，哪怕视觉上排在一起，多个 checked 也会同时生效，提交时可能发多个值，后端收不到预期结果。
- ✅
name="theme"和name="theme"→ 同一组，只有一个checked生效 - ❌
name="Theme"和name="theme"→ 两组，各自独立，都可checked - ⚠️
name=" size "（前后有空格）≠name="size"→ 不是一组
JS 动态设置时别用 setAttribute，改用 .checked = true
如果默认选中项需要根据 URL 参数、localStorage 或用户历史决定，才需要用 JS。但这时不能写 elem.setAttribute('checked', 'checked')——它只改 HTML 属性，不触发浏览器原生的单选互斥逻辑，同组其他项不会自动取消。
立即学习“前端免费学习笔记（深入）”；
正确做法是直接赋值 .checked 属性，并手动清空同组其他项：
const radios = document.querySelectorAll('input[name="theme"]');
radios.forEach(r => {
r.checked = (r.value === 'dark'); // 只让 value 为 'dark' 的那个选中
});
- 用
.checked = true/false是唯一能同步 DOM 状态 + 触发表单行为的方式 - 动态插入的元素（如 innerHTML 后新增），必须先挂载到 DOM，再设置
.checked - 框架（React/Vue）中不要混用
checked和v-model/checked + onChange，否则状态脱钩
服务端渲染或模板引擎里，确保只对一个选项输出 checked
后端生成 HTML 时，容易因条件判断疏漏，导致多个单选框都被模板引擎加上了 checked。虽然浏览器会以 DOM 中第一个为准，但这是不可靠的隐式行为，且 HTML 验证会报错。
- Django 模板中应写：
{% if item == default_value %}checked{% endif %} - Thymeleaf 中用：
</li> <li>关键点：检查生成后的 HTML 源码，确认同名 <code>name
下只有一个checked出现
最容易被忽略的是 name 值在前后端不一致，比如前端写 name="user_type"，后端解析时却按 userType 处理——这时即使 checked 写对了，提交的值也进不了预期字段。
