本文介绍一种纯 css 方案，无需 javascript，即可在 to-do 列表中实现“勾选复选框 → 对应任务文本自动添加删除线”的交互效果，兼顾语义性、可访问性与代码简洁性。
在构建基于 Express + EJS 的 To-Do 应用时，常见的需求是：每个任务项旁配一个复选框，用户勾选后，对应文字以删除线（strikethrough）视觉标记为已完成。虽然初学者常尝试用 JavaScript 动态操作 DOM 样式（如修改 textDecoration 或 webkitTextStroke），但该方式易因元素数量不匹配、渲染时机问题或事件绑定失效而失败——正如你遇到的 getElementsByName 返回空集合或样式未生效的情况。
更优解是采用语义化 HTML 结构 + CSS 邻接选择器（+）驱动样式切换，完全规避 JavaScript 依赖，提升性能与可维护性。
✅ 推荐方案：CSS 驱动 + 语义化标签结构
核心思路：将 与
✅ 正确的 HTML 结构（EJS 模板中使用）
<% for (let i = listItems2.length - 1; i >= 0; i--) { %>
<% } %>? 关键点： 每个复选框拥有唯一 id（如 todo-0, todo-1）； 通过 for 属性精确关联对应复选框； 使用 accent-color 统一复选框高亮色（现代浏览器支持）； 添加 transition-colors 实现颜色渐变，增强用户体验。
✅ 对应的 CSS 样式（推荐放入
/* 基础样式 */
label {
color: #1f2937;
font-size: 1.25rem;
font-weight: 200;
cursor: pointer;
}
/* 勾选后：文本删除线 + 灰色弱化 + 可访问性优化 */
input[type="checkbox"]:checked + label {
color: #6b7280;
text-decoration: line-through;
text-decoration-thickness: 2px;
text-decoration-color: #9ca3af;
}
/* 【重要】无障碍增强：为屏幕阅读器提供上下文提示 */
input[type="checkbox"]:checked + label::before {
content: "[已完成任务]";
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
input[type="checkbox"]:checked + label::after {
content: "[任务已标记为完成]";
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}? 说明：
立即学习“前端免费学习笔记（深入）”；
- text-decoration: line-through 是标准、兼容性极佳的删除线方案（远优于非标准的 textStroke）；
- ::before/::after 中的隐藏文本不会显示在页面上，但会被屏幕阅读器读出，显著提升残障用户可用性；
- clip + position: absolute 组合是 WCAG 推荐的无障碍隐藏技术（比 visibility: hidden 或 display: none 更可靠）。
⚠️ 注意事项与常见误区
- ❌ 避免重复 ID：原代码中所有复选框 id="checkbox_id" 导致 DOM 选择器失效（ID 必须唯一）。务必为每个复选框生成唯一 ID（如 todo-）。
- ❌ 慎用 getElementsByName：该方法返回 NodeList，但 name="para" 在
上无语义意义，且 EJS 渲染后可能因结构变化导致索引错位。CSS 方案天然规避此风险。
- ✅ 响应式与动画友好：transition-colors 和 text-decoration-thickness 支持平滑过渡，可在悬停/勾选时增加微交互反馈。
- ✅ 服务端渲染友好：EJS 直接输出语义化 HTML，无需等待 JS 加载或执行，首屏即具备完整交互能力。
✅ 总结
放弃复杂且易出错的 JavaScript 样式操控，转而采用 HTML 语义化结构 + CSS 伪类选择器，不仅能稳定实现“勾选即删除线”，还能提升应用的可访问性（a11y）、SEO 友好度与长期可维护性。在 To-Do 类应用中，这是符合现代 Web 最佳实践的轻量级、高性能解决方案。
