HTML中设置复选框默认选中应直接使用布尔属性checked，写上即生效，无需赋值；Vue中需用v-model绑定布尔型数据源，React中初始化用defaultChecked、受控则用checked配合onChange。
HTML 中直接设置 checked 属性最简单有效
复选框默认选中，本质是让浏览器在页面加载时就渲染为勾选状态，不是靠 JS 后续操作。直接在 <input type="checkbox"> 标签里写 checked（布尔属性，无需赋值）即可：
<input type="checkbox" name="agree" value="1" checked>
注意：checked="true" 或 checked="checked" 虽然也能生效，但不符合 HTML5 规范；只要存在该属性，就视为“已勾选”，值是什么浏览器根本不读。
常见错误：写成 checked="false" —— 这反而会让它被勾选，因为只要属性存在，就生效。
Vue 项目里用 v-model 绑定布尔值控制选中态
Vue 的响应式机制下，不能只靠初始 HTML 的 checked 属性，必须让数据源（data / ref）初始值为 true，再通过 v-model 双向绑定：
<input type="checkbox" v-model="isAgreed" />
data() 中需设：
return { isAgreed: true }
或 Composition API 中：
const isAgreed = ref(true)
容易踩的坑：
-
v-model绑定的变量类型必须是Boolean，若后端返回的是字符串"1"或数字1，需提前转为布尔值，否则 Vue 会认为“非空即真”，导致意外勾选 - 表单重置时，
v-model不会自动回退到初始值，得手动isAgreed = true
React 中用 defaultChecked 而非 checked 控制初始态
React 区分“受控组件”和“非受控组件”。如果想只设默认值、后续不接管状态，用 defaultChecked：
<input type="checkbox" defaultChecked />
但如果用了 checked 属性（哪怕只设一次），React 就要求你同时提供 onChange 处理函数，否则控制台报错：
Warning: A component is changing an uncontrolled input to be controlled.
所以两种路径要分清：
- 只初始化、不管理后续变化 → 用
defaultChecked={true} - 全程响应式控制 → 用
checked={isChecked}+onChange更新状态
别混用：比如先写 defaultChecked，又在 state 更新后改用 checked，就会触发上述警告。
后端模板（如 Django / Jinja2）中动态插入 checked 属性
服务端渲染场景下，是否默认勾选取决于业务逻辑（例如用户之前提交过、配置项已开启），不能硬编码 checked。需根据上下文变量条件输出该属性：
<input type="checkbox" name="newsletter" {% if user.subscribed %}checked{% endif %} />
Django 模板同理：
<input type="checkbox" name="newsletter" {% if user.subscribed %}checked{% endif %} />
关键点：
- 属性名
checked必须原样写出，不要写成checked="{{ user.subscribed }}"—— 布尔属性不接受字符串值 - 确保后端传入的判断变量是明确的布尔类型或可准确转换（比如避免传
None导致条件判断失效）
复杂点往往不在语法，而在状态来源是否可靠：前端硬编码易维护但僵化，服务端动态判断灵活但依赖数据一致性。选哪条路，得看这个“默认选中”到底代表用户偏好、系统配置，还是历史行为回显。
