如何创建一个简单的任务清单？Input标签Checkbox实现勾选列表-html教程-PHP中文网

用 checkbox 做任务清单需绑定状态与 UI：必须配 label 实现可访问性，用 change 事件监听勾选，结合 id 管理任务状态，localStorage 存对象并手动同步 DOM。

如何创建一个简单的任务清单？input标签checkbox实现勾选列表

用 `<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;"></pre> <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> <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';