如何通过勾选Checkbox为待办列表项添加class以标记任务完成

1. HTML 结构 #

先搭建基础的待办列表结构，每个列表项包含复选框和任务文本：

<ul class="todo-list">
  <li class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-text">整理项目文档</span>
  </li>
  <li class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-text">修复页面响应式bug</span>
  </li>
  <li class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-text">提交本周工作周报</span>
  </li>
</ul>

2. CSS 样式 #

定义完成状态的样式类，通过低透明度标记任务已完成，可选添加删除线增强视觉反馈：

/* 基础待办项样式 */
.todo-item {
  margin: 10px 0;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 已完成任务样式 */
.todo-completed {
  opacity: 0.5;
  text-decoration: line-through; /* 可选：添加删除线强化完成标记 */
}

3. JavaScript 逻辑 #

监听复选框的change事件，切换对应待办项的完成状态类：

// 获取所有待办复选框
const checkboxes = document.querySelectorAll('.todo-checkbox');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 定位当前复选框所属的待办列表项
    const parentTodoItem = this.closest('.todo-item');
    // 自动切换完成状态类（勾选添加，取消移除）
    parentTodoItem.classList.toggle('todo-completed');
  });
});

关键说明 #

• closest('.todo-item')能精准定位复选框所在的列表项，避免DOM层级变化导致的选择失效；
• classList.toggle()无需额外判断复选框状态，自动完成样式类的添加/移除；
• 低透明度搭配删除线的组合，能清晰区分已完成与未完成任务，提升交互体验。

内容的提问来源于stack exchange，提问作者Azongo Ismail