本文解决动态添加的待办事项中，复选框点击后样式仅作用于首个任务的问题，核心在于正确获取当前复选框关联的对应任务文本元素，而非全局查找首个匹配元素。
本文解决动态添加的待办事项中，复选框点击后样式仅作用于首个任务的问题，核心在于正确获取当前复选框关联的对应任务文本元素，而非全局查找首个匹配元素。
在构建动态待办清单（To-Do List）时，一个常见陷阱是：当多个 .task 元素存在时，使用 document.querySelector(".task") 总是返回 DOM 中第一个匹配元素，导致所有复选框点击都只影响首个任务项——这显然违背了“每项独立控制”的交互预期。
问题根源在于事件监听器内部的 DOM 查询逻辑错误：
var task = document.querySelector(".task"); // ❌ 错误：全局查找，始终取第一个
✅ 正确做法是：利用复选框（c）与其相邻
的父子/兄弟结构关系，精准定位其紧邻的后续兄弟元素。观察 HTML 结构：
<div class="task_container"> <input type="checkbox" class="done"><p class="task">用户输入的内容</p> </div>
可见，每个 .task 元素都是对应 .done 复选框的 nextElementSibling。因此，应将事件处理中的查询逻辑替换为：
function lineThrough() {
const checkboxes = document.querySelectorAll(".done");
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("click", () => {
// ✅ 正确：获取当前 checkbox 的下一个兄弟元素（即对应的 .task）
const task = checkbox.nextElementSibling;
if (checkbox.checked) {
task.style.textDecoration = "line-through";
task.style.color = "gray";
} else {
task.style.textDecoration = "none"; // 推荐用 'none' 替代 'unset' 以确保兼容性
task.style.color = ""; // 清空内联样式，让 CSS 默认值生效
}
});
});
}
⚠️ 注意事项：
- 避免重复绑定事件：当前代码每次调用 lineThrough() 都会为所有复选框重新绑定监听器，可能导致同一复选框被绑定多次（尤其在频繁添加任务时）。推荐改为：在创建新任务时，直接为该新复选框绑定事件，而非全局重绑。
- 优化写法（推荐）：将事件绑定移至 add 操作内部，确保仅绑定一次且作用于新增元素：
input.addEventListener("keyup", (event) => {
if (event.key === "Enter" && input.value.trim()) {
const add = `
<div class="task_container">
<input type="checkbox" class="done"><p class="task">${input.value}</p>
</div>
`;
container.insertAdjacentHTML("afterbegin", add);
input.value = "";
// ✅ 为最新添加的复选框立即绑定事件
const newCheckbox = container.querySelector(".done");
newCheckbox.addEventListener("click", function() {
const task = this.nextElementSibling;
task.style.textDecoration = this.checked ? "line-through" : "none";
task.style.color = this.checked ? "gray" : "";
});
}
});
- 更优实践建议：优先使用 CSS 类控制样式（如 .task.completed），而非直接操作 style 属性，便于维护与主题切换：
.task.completed {
text-decoration: line-through;
color: gray;
}
this.nextElementSibling.classList.toggle("completed", this.checked);
通过精准利用 DOM 树结构关系（nextElementSibling），配合一次性事件绑定与语义化 CSS 类管理，即可实现每个待办事项的样式独立响应，彻底解决“样式仅作用于首项”的典型问题。
