checked 是布尔属性，仅存在即生效，正确写法为 ；JS 应用 element.checked = true 而非 setAttribute；它只控制初始状态，用户操作后需 localStorage 或后端保存状态。

checked 属性写在 <input type="checkbox"> 标签里才生效

很多人把 checked 写成 checked="true" 或 checked="checked"，其实只要存在这个属性，浏览器就认为选中——checked 是布尔属性，值不重要，有就是真。checked="false" 也照样选中，因为属性存在即生效。

正确写法只有这一种：

<input type="checkbox" name="agree" value="yes" <strong>checked</strong>>

• 不要写 checked="true"、checked="1"、checked=""（空字符串虽能工作，但语义不清，不推荐）
• JS 动态设置要用 element.checked = true，不是 setAttribute('checked', 'checked')（后者只影响初始状态，且可能和 DOM 同步异常）
• 如果复选框是表单提交的一部分，没加 name 属性，即使 checked 存在，提交时也不会发送该字段值

默认选中但用户取消后，刷新页面仍保持取消状态？

这是常见误解：HTML 的 checked 只控制**初始渲染状态**，不干预后续交互。用户手动取消后，刷新页面会重读 HTML，重新应用 checked，所以又变回选中——除非你用 JS 干预或服务端下发动态 HTML。

• 想“记住用户上次选择”，必须配合 localStorage 或后端存储，不能只靠 checked
• 如果用框架（如 React/Vue），别直接操作 DOM 的 checked 属性，应绑定到响应式数据上，否则状态会脱节
• 服务端渲染时，确保模板中插入的 checked 值与真实业务逻辑一致（比如用户已同意条款，才渲染 checked）

多个复选框共用一个 name，怎么让其中几个默认选中？

name 相同的复选框是独立控件，各自决定是否 checked，不会互相影响。提交时，所有选中的项会以相同 name 发送多个值（如 hobby=reading&hobby=swimming）。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

示例：

<input type="checkbox" name="hobby" value="reading" <strong>checked</strong>> 阅读<br><input type="checkbox" name="hobby" value="swimming"> 游泳<br><input type="checkbox" name="hobby" value="coding" <strong>checked</strong>> 编程

• 注意：不要给不同 value 的复选框设相同 id，ID 必须唯一
• 如果后端期望接收数组，确认它能解析同名多值（PHP 自动转为数组，Node.js 的 urlencoded 中间件需设 extended: true）
• 用 label 包裹复选框或关联 for 属性，提升可访问性；否则仅靠点击小方框选中，体验差

用 JS 判断复选框是否默认选中？

别用 element.getAttribute('checked')，它返回字符串 "" 或 null，不可靠。应该读 DOM 属性 element.checked，它返回布尔值，反映当前真实状态。

• element.hasAttribute('checked') 可判断 HTML 中是否写了该属性（即是否“本意默认选中”）
• 初始加载时，element.checked === element.hasAttribute('checked') 通常为 true；用户操作后，两者可能不同
• 批量操作时，避免用 querySelectorAll('input[type="checkbox"]') 后统一设 .checked = true，这会覆盖用户已有选择——先判断是否本应默认选中再操作

实际项目里最容易漏掉的是：服务端生成 HTML 时，checked 属性的输出逻辑没跟业务状态对齐，或者前端 JS 在 DOM 加载完前就修改了 checked，导致初始闪烁或状态错乱。