用checked属性设置单选框默认选中，只需在对应input标签中直接写checked（不带等号、值或引号），且同name组内仅允许一个元素拥有该属性；若多个存在，浏览器以最后一个为准，但应避免此写法。
如何用 checked 属性设置单选框默认选中
单选框（<input type="radio">）的默认选中靠的是 checked 这个布尔属性，不是靠 JS 或 CSS 控制。只要在某个 <input> 标签里写上 checked，它就会被默认选中——前提是同一 name 组里只有一个带该属性。
-
checked是布尔属性，写上就生效，不需要赋值（checked="true"或checked="checked"都多余，但浏览器也认） - 必须确保同组单选框的
name值完全一致，否则浏览器不认为它们是一组，checked会各自独立生效 - 如果多个同
name的单选框都写了checked，浏览器只认第一个（后续的会被忽略），但这是不符合语义的写法，应避免
为什么加了 checked 却没生效？常见原因
最常踩的坑不是语法错，而是逻辑冲突或 DOM 加载时机问题：
- 页面加载后 JS 又执行了
document.querySelector(...).checked = false，把默认值覆盖了 - 使用了框架（如 Vue/React），直接操作 DOM 的
checked属性会被框架状态重置；此时应改用响应式数据控制（比如 Vue 的v-model绑定初始值） -
name拼写不一致（比如大小写混用、多空格、前后缀不同），导致浏览器识别为不同组 - HTML 中该单选框被动态插入（比如通过
innerHTML注入），而checked属性未被正确解析（某些老版本 IE 对动态插入的布尔属性支持差）
与 defaultChecked 的区别（React 场景下特别注意）
在 React 中，checked 是受控属性，必须配合 onChange 使用；如果只想设初始值，要用 defaultChecked：
<input type="radio" name="theme" value="dark" defaultchecked><input type="radio" name="theme" value="light">
-
defaultChecked只在组件首次渲染时生效，之后无法再通过修改它来改变选中状态 -
checked则是受控的：它的值完全由 React state 决定，哪怕你手动点击，也要靠onChange更新 state，否则会“点不动” - 原生 HTML 不需要
defaultChecked，只用checked即可
服务端渲染或模板引擎里怎么安全写默认值
当 HTML 是后端拼出来的（比如 PHP、Django、Nunjucks），关键是把逻辑判断放在属性生成环节：
<input type="radio" name="size" value="m" if user.preferred_size="=" endif><input type="radio" name="size" value="l" if user.preferred_size="=" endif>
- 确保只有一项满足条件，否则多个
checked并存会导致行为不可靠 - 注意模板语法是否对空格/换行敏感，有些引擎要求
checked必须紧贴=或标签结尾，否则可能被当成文本内容输出 - 如果值来自用户输入或数据库，记得做转义，避免注入攻击（比如
value="{{ unsafe_value|escape }}"）
checked，再查 name 是否统一，最后排查有没有 JS 或框架在背后悄悄改状态。很多“不生效”问题，其实只是开发者自己后来又把它 uncheck 了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
