在构建前端待办事项应用时，最核心的交互之一便是用户勾选某个任务后，该项立刻呈现删除线、置灰等完成态视觉效果。实现这一能力并不依赖框架，原生JavaScript通过合理的事件监听与样式类切换即可完成。下面先看一个基础页面结构。
一、基础HTML结构划分
我们需要将数据展示与状态样式解耦。通常一个待办项由一个复选框和文本组成，外层使用无序列表包裹。这样后续用CSS控制完成态时，只需针对特定类名的列表项生效，而不必改动DOM结构。
推荐将勾选控件与文字放在同一个li标签内，并通过data-id属性关联真实数据标识。这种结构在动态渲染时非常友好，也方便事件委托统一处理。
<ul id="todo-list">
<li class="todo-item" data-id="1">
<input type="checkbox" class="todo-check">
<span>学习JavaScript事件委托</span>
</li>
<li class="todo-item" data-id="2">
<input type="checkbox" class="todo-check">
<span>完成样式动态切换练习</span>
</li>
</ul>
二、为什么用classList.toggle而非改style
初学者常会直接写element.style.textDecoration = 'line-through'，这种方式把表现逻辑写死在脚本里，难以复用且不利于主题切换。更合理的做法是预定义CSS类，用脚本控制类的增删。
classList.toggle方法能在元素上切换指定类：若已存在则移除并返回false，否则添加并返回true。它第二个参数还可接收布尔值强制设定状态，非常适合根据复选框的checked属性同步样式。
.todo-item.completed span {
text-decoration: line-through;
color: #888;
}
.todo-item.completed {
background: #f5f5f5;
}
三、事件委托实现动态切换
如果为每个复选框单独绑定事件，在列表增减时就要反复解绑绑，维护成本高。利用事件冒泡，在父级ul上监听change事件，通过event.target判断是否来自复选框即可。
下面的代码展示了完整逻辑：找到被点击复选框所在的li，调用toggle并传入复选框当前是否勾选的状态。这样无论列表多少项，都只有一个监听器在工作。
const list = document.getElementById('todo-list');
list.addEventListener('change', function(event) {
const target = event.target;
if (target.classList.contains('todo-check')) {
const item = target.closest('.todo-item');
if (item) {
item.classList.toggle('completed', target.checked);
}
}
});
四、方案对比与扩展思考
直接操作style与切换类的差异不仅在于代码整洁度。当完成态需要同时改变背景、字体、动画时，CSS类可以集中管理这些规则，脚本只关心状态。下表列出两者主要区别：
| 方式 | 可维护性 | 性能 | 扩展成本 |
|---|---|---|---|
| 改style属性 | 低，样式散落JS中 | 相近 | 高，每加效果改脚本 |
| toggle类 | 高，样式在CSS | 相近 | 低，只改CSS |
在真实项目中，还可以结合localStorage把勾选状态序列化，刷新后读取并批量添加completed类。事件委托的结构让这种初始化遍历也非常简单，只需循环数据并调用一次classList.toggle。
此外若引入过滤功能，比如仅看未完成项，隐藏逻辑同样可用一个hidden类控制，与完成态完全正交。这种以类为中心的设计思想，是原生JS保持可维护性的关键。
五、完整示例整合
将前面结构、样式与脚本组合，就得到一个最小但完整的动态切换demo。你可以把它存为html文件直接在浏览器打开测试。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.todo-item.completed span {
text-decoration: line-through;
color: #888;
}
.todo-item.completed {
background: #f5f5f5;
}
</style>
</head>
<body>
<ul id="todo-list">
<li class="todo-item" data-id="1">
<input type="checkbox" class="todo-check">
<span>学习JavaScript事件委托</span>
</li>
<li class="todo-item" data-id="2">
<input type="checkbox" class="todo-check">
<span>完成样式动态切换练习</span>
</li>
</ul>
<script>
const list = document.getElementById('todo-list');
list.addEventListener('change', function(event) {
const target = event.target;
if (target.classList.contains('todo-check')) {
const item = target.closest('.todo-item');
if (item) {
item.classList.toggle('completed', target.checked);
}
}
});
</script>
</body>
</html>
通过上述实践，我们可以看到不使用任何库也能优雅地处理待办项状态视图同步。核心就是事件委托加类名切换，它足够轻量，也为后续功能留下了清晰接口。
JavaScript待办事项toggleClass修改时间：2026-08-04 19:03:14