实现Checkbox勾选时文本添加删除线效果的技术求助

纯CSS实现（无需JavaScript） #

利用CSS伪类与兄弟选择器，直接关联复选框和对应文本，是最轻量化的实现方式：

<div class="todo-item">
  <input type="checkbox" id="task-1">
  <label for="task-1">完成项目文档整理</label>
</div>
<div class="todo-item">
  <input type="checkbox" id="task-2">
  <label for="task-2">提交代码PR</label>
</div>

/* 核心逻辑：勾选复选框后，为相邻的label添加删除线 */
.todo-item input[type="checkbox"]:checked + label {
  text-decoration: line-through;
  color: #888; /* 可选：勾选后文本置灰，强化视觉区分 */
}

/* 可选：优化布局样式 */
.todo-item {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

结合JavaScript动态管理待办项 #

如果需要支持动态增删任务，可配合JS实现完整功能：

<div id="todo-list"></div>
<div style="margin-top: 15px;">
  <input type="text" id="task-input" placeholder="输入新任务">
  <button onclick="addNewTask()">添加任务</button>
</div>

function addNewTask() {
  const input = document.getElementById('task-input');
  const taskContent = input.value.trim();
  if (!taskContent) return;

  // 创建待办项容器
  const taskItem = document.createElement('div');
  taskItem.className = 'todo-item';

  // 创建复选框
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.id = `task-${Date.now()}`;

  // 创建文本标签
  const label = document.createElement('label');
  label.htmlFor = checkbox.id;
  label.textContent = taskContent;

  // 组装并添加到列表
  taskItem.appendChild(checkbox);
  taskItem.appendChild(label);
  document.getElementById('todo-list').appendChild(taskItem);

  // 清空输入框
  input.value = '';
}

CSS样式可直接复用纯CSS方案中的代码，动态生成的待办项同样会自动生效勾选删除线的效果。

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