javascript - 多个复选框元素的 querySelectorAll 的 onchange 监听器

Question

我正在尝试将事件 onchange 监听器添加到复选框列表中，以便在选中时，标签文本会被划掉。我似乎无法弄清楚我做错了什么。

let todoItem = document.querySelectorAll('.container');
let checkItem = document.querySelectorAll('.checkItem');

for (let i = 0; i < checkItem.length; i += 1) {
  for (let k = 0; k < todoItem.length; k += 1) {
    checkItem[i].onchange = () => {
      if (checkItem[i].checked === true) {
        todoItem[k].style.textDecoration = 'line-through';
      } else {
        todoItem[k].style.textDecoration = 'none';
      }
    }
  }
}

<div>
  <label class="container">one
  <input type="checkbox" class="checkItem">
 </label>

  <label class="container">two
  <input type="checkbox" class="checkItem">
 </label>

  <label class="container">three
  <input type="checkbox" class="checkItem">
 </label>
</div>

.

Answer 1

所以，这里发生了一些事情。首先，您运行两个循环，基本上是说:对于每个复选框，将其监听器设置为切换标签 1。然后将其监听器设置为标签 2。然后设置标签 3。其次，通过分配 checkItem[i]。 onchange = [Fn]，您将覆盖它之前的任何值，这就是为什么您只看到最后一个标签被切换而不是所有三个标签被切换。所以本质上，循环的结果如下所示:

1. 设置复选框 1 的监听器以切换标签 1。
2. 设置复选框 1 的监听器来切换标签 2，覆盖其之前的监听器。
3. 设置复选框 1 的监听器来切换标签 3，覆盖其之前的监听器。
4. 设置复选框 2 的监听器以切换标签 1。
5. 设置复选框 2 的监听器以切换标签 2，覆盖其之前的监听器。
6. 设置复选框 2 的监听器来切换标签 3，覆盖其之前的监听器。
7. 设置复选框 3 的监听器以切换标签 1。
8. 设置复选框 3 的监听器来切换标签 2，覆盖其之前的监听器。
9. 设置复选框 3 的监听器以切换标签 3，覆盖其之前的监听器。

删除内部循环并仅重用相同的索引将解决您的问题。不过，我建议更进一步，使用 addEventListener 实际分配事件监听器。这样，将来可以添加其他监听器，而不会干扰现有功能。下面的例子。

let todoItem = document.querySelectorAll('.container');
let checkItem = document.querySelectorAll('.checkItem');

for (let i = 0; i < checkItem.length; i += 1) {
  checkItem[i].addEventListener('change', () => {
    if (checkItem[i].checked === true) {
      todoItem[i].style.textDecoration = 'line-through';
    } else {
      todoItem[i].style.textDecoration = 'none';
    }
  });
}

<div>
  <label class="container">one
  <input type="checkbox" class="checkItem">
 </label>

  <label class="container">two
  <input type="checkbox" class="checkItem">
 </label>

  <label class="container">three
  <input type="checkbox" class="checkItem">
 </label>
</div>