如何获取JavaScript动态创建的checkbox元素并添加事件？

问题原因 #

你动态生成的Checkbox是在点击按钮后才创建的，页面初始加载时这些元素并不存在，所以后续用常规方法（比如querySelector）获取它们或者直接绑定事件都会失效。

解决方案一：创建元素时直接绑定事件 #

在动态生成Checkbox的同时，直接给它添加事件监听，这样元素创建完成后事件就已经绑定好了。

修改后的代码：

const getvalue = document.getElementById("add-work")
const btn = document.getElementById("btn")
const listcont = document.getElementById("listcont")

btn.addEventListener("click", e => {
  const eleme = document.createElement("p")
  const inpu = document.createElement("input")
  const tags = document.createElement("span")
  inpu.setAttribute("type", "checkbox")
  
  // 直接给当前创建的Checkbox绑定change事件
  inpu.addEventListener("change", () => {
    // 示例逻辑：勾选后给文本添加删除线
    tags.style.textDecoration = inpu.checked ? "line-through" : "none"
  })
  
  eleme.append(inpu)
  eleme.append(tags)
  tags.textContent = getvalue.value // 用textContent更安全，避免XSS风险
  listcont.append(eleme)
  getvalue.value = ""
})

解决方案二：使用事件委托（推荐） #

利用事件冒泡机制，把事件监听绑定到已存在的父元素（比如listcont）上，通过判断触发事件的目标元素类型，来处理动态创建的Checkbox事件。这种方法不需要每次创建元素都绑定事件，适合批量动态添加元素的场景。

修改后的代码：

const getvalue = document.getElementById("add-work")
const btn = document.getElementById("btn")
const listcont = document.getElementById("listcont")

btn.addEventListener("click", e => {
  const eleme = document.createElement("p")
  const inpu = document.createElement("input")
  const tags = document.createElement("span")
  inpu.setAttribute("type", "checkbox")
  eleme.append(inpu)
  eleme.append(tags)
  tags.textContent = getvalue.value
  listcont.append(eleme)
  getvalue.value = ""
})

// 给父元素绑定事件，监听所有子Checkbox的change事件
listcont.addEventListener("change", e => {
  // 判断触发事件的是不是Checkbox
  if (e.target.type === "checkbox") {
    // 获取对应的文本元素（这里假设Checkbox的下一个兄弟是span）
    const targetTags = e.target.nextElementSibling
    targetTags.style.textDecoration = e.target.checked ? "line-through" : "none"
  }
})

额外提示 #

• 优先用textContent代替innerHTML设置文本内容，避免用户输入包含恶意HTML标签导致的安全问题。
• 如果需要获取所有动态创建的Checkbox，可以在创建时给它们添加统一的类名（比如todo-checkbox），之后用listcont.querySelectorAll(".todo-checkbox")就能获取到所有该类的元素。

内容的提问来源于stack exchange，提问作者mmdhasn