javascript - 查找所有动态添加的选中复选框

Question

我正在制作一个简单的待办事项列表应用程序。我想找到添加后已检查的任务，并对特定任务进行逐行检查。我怎么做？

将更改事件绑定(bind)到创建的每个任务似乎效率很低。我该如何从这里继续？

document.getElementById('taskForm').addEventListener('submit',displayTask);

function displayTask(e){
  let task = document.getElementById('taskInput').value;
  let div = document.createElement('div');

  div.innerHTML = `<input type="checkbox">${task}`

  document.getElementById('taskContainer').appendChild(div)
  e.preventDefault();
}

<form id="taskForm">
  <input type="text" id="taskInput" placeholder="Input task" required>
  <input type="submit" value="Add" >
</form>

<div id="taskContainer"></div>

Answer 1

这是我的贡献。

我使用了 onchange 事件，并用 span 包装了整个输入，它得到了一个名为 .strike-through 的类 toggled :

<小时/>

document.getElementById('taskForm').addEventListener('submit', displayTask);

function strikeThrough(e) {
  e.target.parentNode.classList.toggle('strike-through');
}

function displayTask(e) {
  let task = document.getElementById('taskInput').value;
  let div = document.createElement('div');

  div.innerHTML = `<span><input type="checkbox" onchange="strikeThrough(event)">${task}</span>`

  document.getElementById('taskContainer').appendChild(div)
  e.preventDefault();
}

.strike-through {
  text-decoration: line-through;
}

<form id="taskForm">
  <input type="text" id="taskInput" placeholder="Input task" required>
  <input type="submit" value="Add">
</form>

<div id="taskContainer"></div>