按钮点击生成带复选框的有序列表

本文手把手教你用现代JavaScript打造一个安全、高效且体验出色的动态有序列表：通过addEventListener解耦事件逻辑，用textContent替代innerHTML杜绝XSS风险，结合CSS类实现复选框勾选即显删除线的视觉反馈，并兼顾键盘操作兼容性与语义化DOM结构——代码简洁可维护，功能扎实易扩展，是前端新手进阶与老手优化实践的实用范例。

本文讲解如何使用现代 JavaScript（addEventListener）为按钮绑定点击事件，动态向有序列表添加带复选框的列表项，并通过 CSS 类实现勾选后文字删除线效果，同时规避 innerHTML 安全风险与内联事件的维护缺陷。

要构建一个功能完整、可维护性强的动态有序列表，需兼顾结构清晰性、代码安全性与交互响应性。核心在于三点：解耦事件绑定逻辑、安全插入文本内容、封装复选框交互行为。

首先，移除 HTML 中的 onclick="addToList()" 内联事件——它违反关注点分离原则，难以调试且无法批量管理事件。应改用 addEventListener() 在 JS 中统一注册：

document.querySelector("#button1").addEventListener("click", addToList);

其次，优化 DOM 元素获取方式：将 textInput 和 checkboxList 的 getElementById 调用移至函数外部，仅执行一次，避免重复查询提升性能。

在 addToList 函数中，关键改进包括：

• 使用 textContent 替代 innerHTML 设置列表项文字，杜绝 XSS 风险，且更高效；
• 动态创建 <input type="checkbox"> 并配置其属性；
• 为每个复选框绑定独立的 click 事件监听器，利用 classList.toggle("strikethrough") 切换样式类；
• 将复选框作为子节点插入 li 元素内，确保语义结构正确（即
• <input type="checkbox"> 文本
）。

完整可运行代码如下：

<style>
.strikethrough { text-decoration: line-through; color: #666; }
</style>

&lt;input type=&quot;text&quot; placeholder=&quot;Write here&quot; id=&quot;textInput&quot;&gt;
&lt;input type=&quot;button&quot; id=&quot;button1&quot; value=&quot;Add to List&quot;&gt;
<ol id="checkboxList"></ol>

<script>
const textInput = document.getElementById("textInput");
const checkboxList = document.getElementById("checkboxList");

document.querySelector("#button1").addEventListener("click", addToList);

function addToList() {
  if (!textInput.value.trim()) return; // 防止空条目

  const listItem = document.createElement("li");
  listItem.textContent = textInput.value;

  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.addEventListener("change", () => {
    listItem.classList.toggle("strikethrough");
  });

  listItem.prepend(checkbox); // 复选框置于文字前（更符合常见 UI 习惯）
  checkboxList.appendChild(listItem);
  textInput.value = "";
}
</script>

⚠️ 注意事项：

• 使用 change 事件而非 click 监听复选框，兼容键盘操作（如空格键切换）；
• 添加 trim() 校验，避免提交空白项；
• prepend() 比 appendChild() 更合理地将复选框置于列表项开头；
• .strikethrough 类建议配合 color 变暗以增强视觉反馈。

该方案具备良好的扩展性：后续如需支持删除、编辑或本地存储，均可基于此结构平滑演进。

本篇关于《按钮点击生成带复选框的有序列表》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！