用 checkbox 做任务清单需绑定状态与 UI：必须配 label 实现可访问性，用 change 事件监听勾选，结合 id 管理任务状态，localStorage 存对象并手动同步 DOM。
用 <input type="checkbox"> 做任务清单，核心是绑定状态和反馈
纯 HTML 的 <input type="checkbox"> 本身不保存“已完成”状态，也不自动更新 UI —— 它只提供原始的勾选/取消勾选行为。要让任务清单真正可用，必须配合 label 关联、CSS 控制视觉、JavaScript 管理状态（哪怕只是本地记忆）。
常见错误是只写 <input> 不加 label，导致点击文字无法触发勾选；或没给每个 input 设置唯一 id 和对应的 for 属性，破坏可访问性。
- 每个
<input>必须有唯一id，对应<label for="xxx"></label> - 避免直接操作
checked属性而不监听change事件 —— 用户用空格键切换时可能被忽略 - 别用
click事件监听勾选，优先用change：它只在用户真实改变状态后触发，更可靠
HTML 结构怎么写才干净又可扩展
任务项应封装为语义化结构，方便后续添加删除、持久化或动画。不要把所有 <input> 堆在一层 <div> 里。
<p>推荐写法：</p>
<pre class='brush:php;toolbar:false;'><ul class="task-list">
<li class="task-item">
<input type="checkbox" id="task-1" class="task-checkbox">
<label for="task-1">买咖啡豆</label>
</li>
<li class="task-item">
<input type="checkbox" id="task-2" class="task-checkbox">
<label for="task-2">整理桌面</label>
</li>
</ul></pre>
<ul><li>
<code><ul></ul> 表示任务集合，比 <div> 更符合语义
<li>每个 <code><li> 是独立任务项，便于 JS 单独操作（比如删除某一项）
class 名统一（如 task-checkbox），方便用 document.querySelectorAll('.task-checkbox') 批量绑定事件JavaScript 怎么监听并响应勾选变化
监听 change 事件后，关键是区分「哪个任务被改了」以及「改成了什么状态」。不能只靠 this.checked，还要结合上下文做处理。
基础监听示例：
document.querySelectorAll('.task-checkbox').forEach(box => {
box.addEventListener('change', function() {
const taskId = this.id; // 如 'task-1'
const isDone = this.checked;
console.log(`${taskId} → ${isDone ? '完成' : '未完成'}`);
});
});
- 用
this.id获取当前操作的任务标识，比遍历索引更健壮 - 如果任务动态增删，别用
forEach静态绑定 —— 改用事件委托：document.querySelector('.task-list').addEventListener('change', handler)，再用e.target.matches('.task-checkbox')判断来源 - 勾选后想加删除线？直接改
label的样式：this.nextElementSibling.style.textDecoration = isDone ? 'line-through' : 'none';
为什么 localStorage 存 checkbox 状态容易出错
很多人一上来就存 checked 布尔值到 localStorage，但问题在于：页面重载后，<input> 默认是未勾选的，JS 要手动同步状态。漏掉这步，UI 和存储就会不一致。
- 存的时候建议用对象格式：
{ "task-1": true, "task-2": false }，别存扁平数组 - 读取后必须显式设置
input.checked = savedState[id] || false，否则 DOM 状态不会变 - 别在
DOMContentLoaded之前读取localStorage，否则可能因脚本加载顺序导致覆盖 DOM 默认值 - 如果任务 ID 是自增数字（如
task-1,task-2），新增任务时记得更新最大 ID 并存回，否则重复 ID 会导致状态错乱
最易被忽略的是：用户手动修改了本地存储内容（比如清掉某条），但页面没监听 storage 事件去刷新，导致界面和存储长期不一致。
