HTML单选按钮默认选中唯一标准是添加checked属性，浏览器忽略其值（包括"false"或空字符串），仅凭存在即生效；同一name组内多个checked时仅首个生效；JS运行时应操作.checked属性而非setAttribute。
怎么让 HTML 单选按钮默认选中
加 checked 属性就行，这是唯一标准方式。浏览器渲染时看到这个属性（哪怕值是空的、重复的、或者写成 checked="false"），都会当作已选中处理。
常见错误现象：用 JS 赋值 radio.checked = true 后页面没反应——那是因为 DOM 已渲染完毕，但表单初始状态由 HTML 属性决定，不是 JS 属性。
-
<input type="radio" name="color" value="red" checked>✅ 正确 -
<input type="radio" name="color" value="red" checked>✅ 也行，但冗余 -
<input type="radio" name="color" value="red" checked>❌ 依然被选中 -
<input type="radio" name="color" value="red" checked>✅ 空字符串也生效
同一组单选按钮里只能有一个 checked
浏览器强制保证：同名 name 的 <input type="radio"> 是互斥组，即使你给多个都加了 checked，最终也只认第一个出现的。
使用场景：比如性别选项 name="gender"，如果误写两个 checked，后一个不会生效，但开发者可能以为“逻辑上应该覆盖”，结果测试时发现默认值不对。
- 必须确保同一
name下，仅一个元素带checked - 服务端渲染或模板拼接时容易漏掉判断，导致多个
checked并存（HTML 合法但行为不符合预期） - Vue/React 等框架里靠数据驱动，
checked属性通常不手写，而是绑定:checked="value === 'xxx'"，更安全
怎么用 JS 取消单选按钮的选中状态
不能直接设 radio.checked = false 就完事——因为单选组必须有且仅有一个选中项，如果当前是唯一可选的 radio，设 false 会被浏览器忽略。
立即学习“前端免费学习笔记（深入）”；
正确做法是先确保组里有其他可选 radio 存在，再操作；或者清空整个组的选中态（需配合逻辑控制）。
- 想取消当前选中？得同时选中另一个同
name的 radio：document.querySelector('input[value="blue"]').checked = true - 想实现“全部取消”效果？HTML 标准不支持无选中态，只能用
<select></select>或 checkbox 模拟，或加一个「无偏好」的 radio 作为兜底 - 用
radio.removeAttribute('checked')不起作用，DOM 属性和 JS 属性不同步，得操作.checked属性本身
checked 属性和 .checked 属性的区别
HTML 中的 checked 是初始状态声明；JS 中的 .checked 是实时读写的布尔属性。两者不自动同步，尤其在初始渲染后修改 HTML 属性无效。
性能影响小，但兼容性要注意：IE8+ 都支持 .checked 属性读写，但老 IE 对 setAttribute('checked', ...) 行为不一致，所以别这么干。
- 初始化用 HTML
checked属性 - 运行时控制一律用 JS
.checked = true/false - 不要混用
setAttribute('checked', 'checked')或removeAttribute('checked')，容易在旧环境出错
default_choice: "green"，但模板里写死了 checked 在 red 上，上线后才发现默认值错位。这种问题不报错，但用户第一眼看到的就是错的。 
