按钮OnClick事件：如何实现带复选框的有序列表添加功能？

这里是修改后的完整代码，实现了你需要的所有功能：

<input type="text" placeholder="Write here" id="textInput" />
<input type="button" id="button1" value="Add to List" onclick="addToList()" />
<ol id="checkboxList"></ol>

<style>
.checked {
  text-decoration: line-through;
}
</style>

function addToList() {
  const textInput = document.getElementById("textInput");
  const checkboxList = document.getElementById("checkboxList");
  // 避免添加空条目
  const inputValue = textInput.value.trim();
  if (!inputValue) return;

  // 创建列表项容器
  const listItem = document.createElement("li");
  
  // 创建复选框
  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  
  // 创建文本容器，方便添加删除线样式
  const textSpan = document.createElement("span");
  textSpan.textContent = inputValue;
  
  // 给复选框绑定勾选事件
  checkbox.addEventListener("change", () => {
    textSpan.classList.toggle("checked");
  });
  
  // 把复选框和文本添加到列表项
  listItem.appendChild(checkbox);
  listItem.appendChild(textSpan);
  
  // 添加到有序列表
  checkboxList.appendChild(listItem);
  
  // 清空输入框
  textInput.value = "";
}

关键改动说明： #

• 拆分复选框与文本：将列表项拆分为复选框和独立的文本容器（<span>），确保删除线只作用于文本，不会影响复选框。
• 样式切换逻辑：通过CSS定义.checked类，利用classList.toggle()在复选框勾选/取消时切换类，实现删除线的显示/隐藏。
• 空输入过滤：添加trim()和空值判断，防止用户添加无内容的列表项。
• 安全的文本设置：用textContent替代innerHTML设置文本，避免输入的HTML代码被解析执行，提升安全性。

内容的提问来源于stack exchange，提问作者Débora Andrade