在构建交互式 Web 应用程序时，微交互往往能极大地提升用户体验。你是否曾遇到过待办事项列表，当你勾选一项任务时，它的文字会自动变成灰色并添加删除线？这是一个非常经典且实用的前端功能。在这篇文章中，我们将深入探讨如何利用 HTML、CSS 和 JavaScript，在用户选中复选框时为段落文本应用删除线效果。
这不仅仅是一个简单的样式切换，通过这个案例，我们将一起学习 DOM 操作、事件监听以及样式动态修改的核心概念。无论你是刚入门的前端新手，还是希望复习 DOM 操作的开发者，这篇文章都将为你提供详尽的实现思路和最佳实践。我们将从最基础的实现开始，逐步过渡到更高级的用法，并探讨在实际开发中可能遇到的坑与解决方案。
为什么这个功能如此重要？
在开始编码之前，让我们先思考一下为什么我们需要这样的功能。直观的视觉反馈是现代 UI 设计的基石。当用户执行一个操作（比如点击复选框）时，如果界面能够立即给出明确的状态变化（文本被划掉），用户会感到掌控感和确认感。这在以下场景中尤为常见：
- 待办事项列表：标记任务完成。
- 购物车：标记不想购买或已售罄的商品。
- 问卷调查：标记不适用的选项。
核心实现思路
要实现这个效果，我们需要结合三种 Web 技术的力量：
- HTML (结构)：我们需要构建一个复选框（INLINECODEa70ff0d5）作为开关，以及一个用于显示文本的容器（如 INLINECODE128e1420 或
）。 - CSS (样式)：我们将定义页面的基本布局，以及删除线本身的样式（例如颜色、粗细）。
- JavaScript (行为)：这是“大脑”。我们需要编写脚本来“监听”复选框的状态变化。一旦检测到状态改变，立即修改文本容器的 CSS 属性。
方法一：基础实现——使用 JavaScript 直接操作样式
这是最直观的方法，适合理解底层逻辑。我们将使用 INLINECODE6f695dd8 获取元素，并利用 INLINECODEc3a0b4f7 监听 change 事件。
#### 代码示例
在这个例子中，我们将创建一个简洁的卡片。当你点击复选框时，JavaScript 会判断复选框的 INLINECODEeac90f2f 属性，并据此修改段落的 INLINECODEac166d0e 样式。
复选框删除线效果 - 基础版
/* 页面基础布局：居中显示 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
background-color: #f0f2f5;
font-family: ‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif;
}
/* 标题样式 */
#heading {
color: #2c3e50;
margin-bottom: 20px;
}
/* 卡片容器样式 */
.main {
background: white;
border: 2px solid #4caf50;
padding: 40px;
box-shadow: 0px 4.5px 15px rgba(0, 0, 0, 0.1);
border-radius: 15px;
text-align: center;
width: 300px;
}
/* 复选框标签样式 */
label {
font-size: 18px;
font-weight: bold;
cursor: pointer;
display: block;
margin-bottom: 15px;
}
/* 目标文本样式 */
#textToStrike {
font-size: 16px;
color: #333;
transition: color 0.3s ease; /* 添加颜色过渡动画 */
}
交互示例演示
这是一段等待被划掉的示例文本。它将演示 JavaScript 如何控制 DOM 样式。
// 1. 获取 DOM 元素引用
const checkbox = document.getElementById("checkbox");
const textElement = document.getElementById("textToStrike");
// 2. 添加事件监听器，监听 ‘change‘ 事件
// ‘change‘ 事件在复选框状态改变时触发
checkbox.addEventListener("change", function () {
// 3. 检查复选框是否被选中
if (this.checked) {
// 如果选中，设置删除线样式，并稍微改变颜色以示区别
textElement.style.textDecoration = "line-through";
textElement.style.color = "#888";
} else {
// 如果未选中，移除样式，恢复原状
textElement.style.textDecoration = "none";
textElement.style.color = "#333";
}
});
#### 代码深入解析
在这个示例中，我们做了一些细节上的优化：
- HTML Label 关联：我们将 INLINECODE388a54e5 包裹在 INLINECODEfad4699c 标签中，并通过
for属性关联。这意味着用户不需要非得点击那个小小的复选框，点击文字也能触发选中状态，这大大增加了可用区域（Hit Area），对移动端用户尤其友好。 - Transition 过渡效果：在 CSS 中，我们给 INLINECODE74985d64 标签添加了 INLINECODE11e6a50e。虽然
text-decoration属性很难做平滑过渡，但我们可以通过颜色的渐变来软化视觉突兀感。 - Change 事件：我们使用了 INLINECODEae3d6a2c 事件而不是 INLINECODE9bd53e95 事件。虽然两者在复选框上表现相似，但
change语义更明确，专门用于表单元素状态的改变。
方法二：CSS 高级技巧——利用 :checked 伪类
你可能不知道，其实仅使用 CSS 和正确的 HTML 结构，我们也能实现这个效果！这种方法不需要编写任何 JavaScript 代码，性能更高，也更简洁。
#### 原理
CSS 提供了一个强大的伪类选择器 INLINECODEce3496d6，它可以选中被选中的 input 元素。结合通用兄弟选择器（INLINECODE50be3ba6）或相邻兄弟选择器（+），我们可以根据复选框的状态来改变后面兄弟元素的样式。
#### 代码示例
纯 CSS 实现删除线
body {
font-family: sans-serif;
padding: 50px;
text-align: center;
}
.card {
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
display: inline-block;
}
/* 核心逻辑：
当 id 为 ‘toggle‘ 的复选框被选中时，
找到它后面紧邻的 .content 类元素，并应用样式
*/
#toggle:checked + .content {
text-decoration: line-through;
color: red;
font-style: italic;
}
纯 CSS 方案
不需要一行 JavaScript 代码：
这段文字会在勾选上方复选框时变红并添加删除线。
#### 优缺点分析
这种方法非常优雅，但它有一个明显的局限性：HTML 结构必须受限。目标元素必须在 DOM 树中位于复选框的后面，且两者必须是兄弟关系。如果你的布局非常复杂，文本和复选框在不同的父容器中，这种方法就无能为力了。在这种情况下，我们还是得回退到 JavaScript 方案。
进阶实战：打造一个动态待办事项列表
为了让你更好地理解这些概念的实际应用，让我们把刚才的知识点整合起来，构建一个稍微复杂一点的“待办事项生成器”。我们将允许用户输入文本，动态添加到列表中，并实现划掉功能。
动态待办事项
body {
font-family: ‘Segoe UI‘, sans-serif;
background-color: #eef;
display: flex;
justify-content: center;
padding-top: 50px;
}
.container {
background: white;
width: 400px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.input-group {
display: flex;
margin-bottom: 20px;
}
input[type="text"] {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 10px;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style: none;
padding: 0;
}
li {
background: #f9f9f9;
margin-bottom: 8px;
padding: 10px;
border-radius: 4px;
display: flex;
align-items: center;
}
li span {
margin-left: 10px;
flex-grow: 1;
cursor: pointer;
transition: all 0.2s;
}
/* 任务完成时的样式类 */
.task-completed {
text-decoration: line-through;
color: #aaa;
}
我的任务清单
-
学习 HTML 和 CSS
// 添加新任务
function addTask() {
const input = document.getElementById("taskInput");
const taskText = input.value;
if (taskText === "") return; // 简单的校验
// 创建新的 li 元素
const li = document.createElement("li");
// 构建 li 内部的 HTML 结构
// 注意：我们在 onchange 中直接传递了 ‘this‘，即 checkbox 元素本身
li.innerHTML = `
${taskText}
`;
// 将新任务追加到列表中
document.getElementById("taskList").appendChild(li);
input.value = ""; // 清空输入框
}
// 切换任务状态
function toggleTask(checkbox) {
// checkbox 的下一个兄弟元素是 span
const textSpan = checkbox.nextElementSibling;
if (checkbox.checked) {
textSpan.classList.add("task-completed");
} else {
textSpan.classList.remove("task-completed");
}
}
开发中的常见陷阱与最佳实践
在开发此类功能时，我们可能会遇到一些问题。让我们看看如何避免它们。
1. ID 重复导致的 bug
在 JavaScript 方法一中，我们使用了 INLINECODE0e25eea6。如果你在代码中复制粘贴了 HTML 结构，却忘记修改 ID，导致页面上出现了两个 INLINECODEdaaef5d6，getElementById 只会返回第一个匹配的元素。这通常会导致你点击复选框时，没有任何反应，或者错误的文本被划掉了。
- 解决方案：确保 ID 的唯一性，或者在动态生成的元素中使用
class和事件委托（如上面的进阶示例所示）。
2. 性能优化（重排与重绘）
在 JavaScript 中频繁修改 style 属性会触发浏览器的重排和重绘，如果在一个包含成千上万条列表的页面中，这可能会导致卡顿。
- 解决方案：不要直接操作 INLINECODEe78bcb05，而是像上面的示例那样，预先定义好 CSS 类（例如 INLINECODE8862449a），然后使用 JavaScript 来切换这个 class（
element.classList.add/remove）。这样浏览器会进行批量优化，性能更好。
3. 可访问性
确保你的复选框和文本有关联。如果你的 HTML 结构是分离的（没有 Label 包裹），盲人用户使用的屏幕阅读器可能无法将复选框与它要控制的文本联系起来。
- 解决方案：尽量使用 INLINECODEe1444cbe 标签包裹，或者使用 INLINECODEac351f60 属性。
总结与展望
在本文中，我们通过三种不同的方式实现了“复选框控制文本删除线”的功能：
- 基础 DOM 操作：最直接，适合逻辑简单的场景。
- 纯 CSS 伪类：最轻量，适合结构受限的场景。
- 动态列表生成：最接近实战，展示了如何组合使用这些技术。
我们不仅学习了 INLINECODEdff2a4b5（怎么做），还探讨了 INLINECODE914a1e4a（为什么要这样做）以及性能和可维护性的重要性。掌握这些基础知识后，你可以尝试将这些逻辑扩展到更复杂的场景中，比如制作一个完整的笔记应用、一个投票系统或者一个交互式调查问卷。
希望这篇文章对你有所帮助。继续编码，继续探索，你会发现 Web 开发的世界充满了无限可能！