如何通过 CSS 实现复选框勾选后文本自动添加删除线效果

本文介绍一种纯 css 方案，无需 javascript，即可在 to-do 列表中实现“勾选复选框 → 对应任务文本自动添加删除线”的交互效果，兼顾语义性、可访问性与代码简洁性。

在构建基于 express + Ejs 的 To-Do 应用时，常见的需求是：每个任务项旁配一个复选框，用户勾选后，对应文字以删除线（strikethrough）视觉标记为已完成。虽然初学者常尝试用 JavaScript 动态操作 dom 样式（如修改 textDecoration 或 webkitTextStroke），但该方式易因元素数量不匹配、渲染时机问题或事件绑定失效而失败——正如你遇到的 getElementsByName 返回空集合或样式未生效的情况。

更优解是采用语义化 HTML 结构 + css 邻接选择器（+）驱动样式切换，完全规避 JavaScript 依赖，提升性能与可维护性。

✅ 推荐方案：CSS 驱动 + 语义化标签结构

核心思路：将 与 成对绑定（使用 for/id 关联），利用 :checked + label 选择器精准控制紧邻的标签样式。

✅ 正确的 HTML 结构（EJS 模板中使用）

<% for (let i = listItems2.length - 1; i >= 0; i--) { %>   
     <input        type="checkbox"        name="task"        value="<%= listItems2[i] %>"     >            <%= listItems2[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 最佳实践的轻量级、高性能解决方案。