开发HTML/CSS/JS待办清单后如何实现点击复选框划掉对应内容

前置准备 #

首先先定义好控制删除线样式的CSS类：

.completed {
  text-decoration: line-through;
  color: #888; /* 可选：完成的待办设置为灰色，视觉区分更明显 */
}

你的待办项HTML结构建议统一为类似结构（可根据你现有结构调整，只要保证每个待办项内包含复选框和内容节点即可）：

<!-- 父级待办列表容器 -->
<div id="todo-list">
  <!-- 单个待办项 -->
  <div class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-content">采购生活用品</span>
  </div>
  <div class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-content">完成本周工作周报</span>
  </div>
</div>

实现代码 #

推荐用事件委托的方式实现，支持后续动态添加的待办项，不需要重复绑定事件：

// 给待办列表父容器绑定change事件
document.querySelector('#todo-list').addEventListener('change', function(e) {
  // 仅处理复选框触发的事件
  if (e.target.classList.contains('todo-checkbox')) {
    // 定位到当前复选框对应的待办内容节点
    const todoContent = e.target.closest('.todo-item').querySelector('.todo-content');
    // 根据复选框选中状态切换删除线样式类
    todoContent.classList.toggle('completed', e.target.checked);
  }
})

如果你的待办项都是静态的，也可以直接给所有复选框单独绑定事件：

const todoCheckboxes = document.querySelectorAll('.todo-checkbox');
todoCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const todoContent = this.closest('.todo-item').querySelector('.todo-content');
    todoContent.classList.toggle('completed', this.checked);
  })
})

注意事项 #

• 优先使用change事件而非click事件，change可以兼容键盘操作勾选复选框的场景，覆盖更全面的用户操作习惯
• 用CSS类控制样式而非直接修改style属性，后续需要调整完成态样式时只需修改CSS即可，维护成本更低
• classList.toggle的第二个参数为布尔值，值为true时添加类，false时移除类，无需额外写if else判断

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