本文介绍一种纯 css 方案，通过 :checked + label 组合选择器为待办事项添加删除线样式，避免 javascript 操作 dom 的复杂性与兼容性问题，提升性能与可维护性。
在构建 To-Do 列表应用（如基于 Express + EJS 的服务端渲染项目）时，常需实现“勾选复选框即为任务完成，并视觉上呈现删除线效果”。虽然可通过 JavaScript 动态修改
元素的 text-decoration 或 webkitTextStroke 属性实现，但该方式存在明显缺陷：
- 多个元素使用相同 name 属性（如 "checker" / "para"）导致 getElementsByName() 返回 NodeList 无法按预期索引匹配；
- webkitTextStroke 并非标准文本删除线方案，仅模拟描边效果，语义不正确、可访问性差，且在多数浏览器中不支持 text-stroke 控制删除线；
- 事件监听绑定发生在脚本执行时，若 DOM 尚未完全加载或 EJS 渲染顺序异常，boxes.length 可能为 0，导致监听失效。
✅ 推荐方案：纯 CSS 驱动，语义清晰、零 JS、高可访问性
核心思路是将复选框与文本内容建立明确的 HTML 结构关系，利用 CSS 的相邻兄弟选择器（+）和 :checked 状态伪类实现样式联动：
✅ 正确 HTML 结构（EJS 模板中使用）
<% for (let i = listItems2.length - 1; i >= 0; i--) { %>
<% } %>? 关键点： 每个 必须有唯一 id（如 task-0, task-1）； 对应 必须设置 for 属性指向该 id； 使用 accent-color 统一复选框颜色（现代浏览器支持）； label 默认包裹文本，语义正确，点击即可触发复选框切换。
✅ 推荐 CSS 样式（支持无障碍与视觉反馈）
/* 基础样式 */
label {
color: #1f2937;
font-size: 1.25rem; /* 替代 text-[32px]，更可维护 */
font-weight: 200;
cursor: pointer;
transition: all 0.2s ease;
}
/* 勾选后：删除线 + 灰色弱化 + 可选视觉提示 */
input[type="checkbox"]:checked + label {
text-decoration: line-through;
color: #6b7280;
opacity: 0.85;
}
/* 【增强可访问性】隐藏但保留给屏幕阅读器的上下文提示（非必需，按需启用）*/
input[type="checkbox"]:checked + label::before {
content: "[已完成] ";
font-size: 0.8em;
color: #6b7280;
}? 为什么不用 webkitTextStroke？
text-stroke 是文字描边属性，用于艺术字体效果，不能替代 text-decoration: line-through。后者是 W3C 标准定义的语义化删除线，被所有主流浏览器原生支持，且对屏幕阅读器友好（配合 ARIA 或语义化标签可进一步增强）。立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项与最佳实践
- 不要重复使用 id：原代码中所有复选框 id="checkbox_id" 违反 HTML 规范（id 必须唯一），会导致 for 关联失效；
-
避免 name="para" 等非标准用法：name 属性对
无效，应使用语义化
- 服务端状态同步：CSS 仅控制前端视觉。若需持久化完成状态（如提交到 Express 后端），应在表单提交时读取 checked 状态，或通过 AJAX 发送变更；
- 移动端适配：确保
- 渐进增强：即使 CSS 未加载，复选框仍可正常交互，符合渐进增强原则。
✅ 总结
用 input:checked + label 实现删除线，是兼顾简洁性、可访问性与健壮性的最佳实践。它消除了 JavaScript 绑定时机、DOM 查询匹配、跨浏览器兼容等潜在风险，同时使模板逻辑更清晰、样式更易维护。在 Express + EJS 项目中，只需调整 HTML 结构与少量 CSS，即可零 JS 实现专业级 To-Do 交互体验。
