问将侦听器更改为多个复选框元素的querySelectorAll
EN

Stack Overflow用户

提问于 2020-02-07 07:56:20

回答 3查看 498关注 0票数 0

我正在尝试向复选框列表中添加一个事件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>

。

javascript

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-02-07 08:09:43

所以，这里发生了几件事。首先，您正在运行两个循环，基本上是这样的:对于每个复选框，设置它的侦听器来切换label 1。然后将它的侦听器设置为label 2。然后是label 3。其次，通过赋值checkItem[i].onchange = [Fn]，您将覆盖它以前的任何值，这就是为什么您只看到最后一个标签被切换而不是全部三个。从本质上说，循环的结果如下所示：

设置复选框1的侦听器切换标签1。
设置复选框1的监听器切换标签2，覆盖先前的侦听器；
将复选框1的监听器设置为切换标签3，覆盖以前的侦听器。
设置复选框2的监听器切换标签1。

<代码>H 110设置复选框2的监听器切换标签2，覆盖其上一个

复选框2的监听器切换标签3。重写前一个listener.
Set复选框3的监听器以切换标签1。
将复选框3的监听器设置为切换标签2，重写以前的listener.
Set复选框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>

票数 1

Stack Overflow用户

发布于 2020-02-07 08:01:47

您的内环是问题所在，您将所有标签迭代到最后一个标签，并将其作为onchange事件应用于每个复选框，因此最后一个标签总是会通过它，无论选中哪个复选框，因为有与复选框完全相同的标签数量，所以去掉内环：

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

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

工作小提琴：https://jsfiddle.net/rbcLm03g/

票数 1

Stack Overflow用户

发布于 2020-02-07 08:36:33

不要过多地展开代码，编写如下代码：

let checkItem = document.querySelectorAll('.checkItem');
[...checkItem].forEach((cb)=>{ // Array.from().forEach
  cb.addEventListener("change", function(){
    if(this.checked===true){
      this.parentElement.style.textDecoration = 'line-through';
    }else{
      this.parentElement.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>