正确写法是直接写checked（无等号无值），属性存在即选中；checked="false"等错误写法仍会触发勾选，后端应通过逻辑判断决定是否输出该属性。
回显时直接用 checked 属性就行，但必须是布尔属性写法
HTML 中 <input type="checkbox"> 的状态由 checked 属性是否存在决定，不是它的值。写成 checked="false" 或 checked="" 都会触发勾选——只要这个属性存在，浏览器就认为它被选中。
正确做法是：后端/模板引擎只在需要勾选时输出 checked 属性本身，不带等号和值；不需要时完全不写该属性。
-
<input type="checkbox" name="agree" checked>→ 勾选 -
<input type="checkbox" name="agree">→ 未勾选 -
<input type="checkbox" name="agree" checked="false">→ 依然勾选（错误写法）
服务端模板里别拼字符串，用逻辑控制属性存在与否
很多开发者习惯在模板里拼接 checked="{{ item.checked }}"，结果生成了 checked="0" 或 checked="false"，导致语义失效。
应该让模板引擎根据布尔值决定是否渲染该属性：
立即学习“前端免费学习笔记（深入）”；
- Twig：
<input type="checkbox" name="role" {% if user.has_admin %}checked{% endif %}> - Jinja2：
<input type="checkbox" name="email_notify" {{ "checked" if user.notify_email else "" }}> - PHP（原生）：
<input type="checkbox" name="active"= $user['active'] ? ' checked' : '' ?>>
JS 动态回显时别用 setAttribute('checked', ...)
DOM 操作中，setAttribute('checked', 'true') 和 setAttribute('checked', true) 都只是设置 HTML 属性，不能同步更新元素的实时状态（element.checked），尤其在表单提交或后续 JS 读取时容易出错。
正确方式是直接赋值给 checked 属性（注意不是 setAttribute）：
const cb = document.querySelector('input[name="subscribe"]');
cb.checked = true; // ✅ 正确：更新 DOM 属性 + 实际状态
cb.setAttribute('checked', 'checked'); // ❌ 错误：仅写入 HTML 属性，状态可能不同步
如果从数据中读取的是字符串 "1" 或 "on"，记得先转布尔：cb.checked = data.subscribe === '1';
多个 checkbox 共享 name 时，后端接收逻辑要匹配
当一组 checkbox 使用相同 name（如 name="hobby"），浏览器只提交被勾选项的 value。后端收到的是一个数组或多个同名参数，不是单个布尔值。
回显时不能只看“有没有这个字段”，而要看当前值是否在提交的数组中：
- 提交了
hobby=reading&hobby=coding - 回显
<input name="hobby" value="reading" checked>→ ✅ - 回显
<input name="hobby" value="cooking" checked>→ ❌（除非 cooking 确实在原始提交中）
常见坑：后端把 hobby 当成单值处理，导致只回显第一个或覆盖判断逻辑。
