如何最简标记待办事项为已完成？求JS实现点击添加删除线

没问题！我来帮你搞定这个功能～你已经准备好了CSS的删除线样式，剩下的JS逻辑核心就是通过点击事件切换元素的样式类，下面分两种常见场景给你实现代码：

场景1：待办项包含复选框（点击文本/复选框都能标记） #

假设你的HTML结构是这样的（如果和你的实际结构有出入，调整选择器即可）：

<ul id="todoList">
  <li class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-text">完成CSS编写</span>
  </li>
  <li class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-text">整合JS功能</span>
  </li>
</ul>

你的CSS应该已经写了类似这样的完成态样式：

.todo-completed .todo-text {
  text-decoration: line-through;
  color: #999; /* 可选：变灰增强视觉区分 */
}

对应的JS代码：

// 获取所有待办项和复选框元素
const todoItems = document.querySelectorAll('.todo-item');
const todoCheckboxes = document.querySelectorAll('.todo-checkbox');

// 绑定待办项点击事件（点击文本区域也能标记）
todoItems.forEach(item => {
  item.addEventListener('click', function(e) {
    // 避免点击复选框时触发两次事件（因为复选框在item内部）
    if (e.target.type !== 'checkbox') {
      // 切换完成态样式类
      this.classList.toggle('todo-completed');
      // 同步复选框的选中状态，保证交互一致
      const checkbox = this.querySelector('.todo-checkbox');
      checkbox.checked = !checkbox.checked;
    }
  });
});

// 绑定复选框状态变化事件
todoCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 找到当前复选框所属的待办项
    const todoItem = this.closest('.todo-item');
    // 根据复选框状态添加/移除完成类
    todoItem.classList.toggle('todo-completed', this.checked);
  });
});

场景2：纯文本待办项（仅点击文本标记） #

如果你的待办项是纯文本的li元素，没有复选框，代码会更简洁：
HTML示例：

<ul id="todoList">
  <li class="todo-item">买菜</li>
  <li class="todo-item">整理桌面</li>
</ul>

CSS样式：

.todo-completed {
  text-decoration: line-through;
}

JS代码：

// 获取所有待办项
const todoItems = document.querySelectorAll('.todo-item');

// 给每个待办项绑定点击事件
todoItems.forEach(item => {
  item.addEventListener('click', function() {
    // 切换完成态样式类，一键实现删除线效果
    this.classList.toggle('todo-completed');
  });
});

核心逻辑说明 #

不管哪种场景，核心都是利用classList.toggle()方法来添加/移除标记完成的样式类——这个方法会自动判断元素是否已经有目标类，有就移除，没有就添加，完美适配“点击切换状态”的需求。

内容的提问来源于stack exchange，提问作者Dragon Kyn