纯HTML无法真正分配任务，因其无状态保存、无身份校验、无并发控制；仅支持单人离线记录或作为后端表单前端部分，刷新即丢数据，多人编辑会冲突。
直接用 <table> 搭配 <code><input type="checkbox"> 就能实现，不需要 JavaScript 也能完成基础勾选；但真要“分配任务”——即让某人只勾自己那行、状态可持久、多人协作不冲突——纯 HTML 做不到，必须后端或本地存储配合。
怎么用 HTML 写出带勾选的成员任务表
核心是表格结构 + 表单控件组合。每行一个成员，每列一个任务，每个单元格放一个独立的复选框，name 属性按“成员-任务”命名便于识别。
常见错误现象：<input> 忘加 id 和 for，导致点击文字无法触发勾选；或者所有复选框共用同一个 name，一勾全勾。
- 每个
<input type="checkbox">必须有唯一id，对应<label for="xxx"></label> -
name建议设为member_task这类通用名，提交时靠value区分（如value="张三_需求评审"） - 不要用
disabled锁定他人行——纯 HTML 下没权限控制，只是视觉欺骗，用户仍可改 DOM 绕过
<table>
<tr>
<th>成员</th>
<th>需求评审</th>
<th>接口开发</th>
</tr>
<tr>
<td>张三</td>
<td><input type="checkbox" id="zhangsan_req" name="member_task" value="张三_需求评审"><label for="zhangsan_req">✓</label></td>
<td><input type="checkbox" id="zhangsan_api" name="member_task" value="张三_接口开发"><label for="zhangsan_api">✓</label></td>
</tr>
</table>
为什么纯 HTML 无法真正“分配任务”
HTML 是静态标记语言，不保存状态、不校验身份、不处理并发。你勾了“张三_接口开发”，刷新页面就没了；李四打开同一份 HTML 文件，也能随意勾选张三的任务。
立即学习“前端免费学习笔记（深入）”；
使用场景限制很明确：仅适用于单人离线记录、教学演示、或作为后端表单的前端部分。
- 勾选状态不会自动保存到本地文件（
file://协议下浏览器禁止写入） - 没有登录机制，
localStorage存的是当前设备+当前域名下的数据，换台电脑/清缓存就丢 - 多人同时编辑同一份 HTML 文件？只能靠手动合并，不存在实时同步
如果非要零后端临时用，怎么让勾选状态多撑几小时
用 localStorage 记录勾选，配合 onchange 和页面加载时回填。不完美，但比每次刷新重来强。
性能影响极小，兼容性 OK（IE8+），但注意：不同成员用同一份 HTML 文件时，localStorage 是共享的，会互相覆盖。
- 给每个复选框加
data-key="zhangsan_req"，方便 JS 映射 - 页面加载完立刻读
localStorage.getItem('task_state')并设checked - 每次勾选触发
localStorage.setItem('task_state', JSON.stringify(obj)) - 别依赖它做真实协作——这只是“防止手滑刷新丢数据”的补丁
真正的任务分配，绕不开身份识别和状态存储。哪怕用 localStorage，也要意识到：它存的是“这台电脑上这个人最后一次的操作”，不是“张三已确认负责接口开发”。这点最容易被忽略，也最常导致协作误会。
