复选框默认选中用 checked 属性,它是布尔属性,有即选中;不可用 selected;JS 动态控制用 element.checked = true/false;Vue/React 中需用 v-model 或 checked 绑定状态,避免混用。

HTML复选框默认选中用 checked 属性,不是 selected
很多人把 <select> 下拉框的 selected 搞混到复选框上,结果加了 selected="selected" 完全没反应。复选框(<input type="checkbox">)只认 checked —— 它是布尔属性,有这个属性就选中,跟值无关。
-
checked是原生 HTML 属性,不需要 JS 就能生效,服务端渲染或静态页面直接写上就行 - 写成
checked="true"或checked="checked"都行,但最简写法是checked(无值),语义更干净 - 如果用 JS 动态控制,操作的是
element.checked = true/false,不是setAttribute('checked', ...)—— 后者只影响初始状态,不触发 DOM 的 checked 状态同步
Vue/React 中别直接写 checked,要绑定数据
框架里硬写 checked 属性会失效,因为框架接管了表单控制权。比如 Vue 里写 <input type="checkbox" checked v-model="agree">,那个 checked 会被忽略,完全由 v-model 决定初始值。
- Vue:初始值设在 data 或 ref 里,
agree: true,然后用v-model="agree" - React(受控组件):用
checked={this.state.agree}+onChange更新 state,不能只靠属性 - 注意:如果用了框架又手动调
input.checked = true,可能和框架状态不一致,导致点击失灵或视图错乱
checked 和 defaultChecked 在 React 里必须分清
React 里 defaultChecked 只管首次渲染时的“默认”状态,之后完全交给 checked 控制;而 checked 是受控的,必须配合 onChange,否则会报警告甚至变只读。
- 想初始化选中、后续也允许用户改:用
defaultChecked={true},搭配onChange更新 state - 想完全受控(比如权限开关依赖后端返回):必须用
checked={this.state.enabled},且每次更新都要同步 state - 漏写
onChange却用了checked?控制台会报A component is changing a controlled input to be uncontrolled
服务端渲染或表单重载时,checked 值要和实际业务逻辑对齐
比如用户提交表单失败后重显页面,复选框是否默认选中,不该只看字段有没有值,而要看业务含义。一个「订阅邮件」字段,数据库存的是 0/1,但后端模板里写成 checked="{{ user.subscribed }}" 就错了——因为 "0" 字符串在 HTML 中仍是真值,会被当成选中。
立即学习“前端免费学习笔记(深入)”;
- PHP 模板里别直接插变量:
checked="{{ $user->subscribed }}"→ 改成{{ $user->subscribed ? 'checked' : '' }} - Node.js(EJS)同理:
<input type="checkbox" name="notify" - 前后端对「未勾选」的约定要统一:是
null、false、0还是缺失字段?别让前端靠字符串判断











