将侦听器更改为多个复选框元素的querySelectorAll
将侦听器更改为多个复选框元素的querySelectorAll
提问于 2020-02-07 15:56:20
我正在尝试向复选框列表中添加一个事件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>
。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-02-07 16: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>
Stack Overflow用户
发布于 2020-02-07 16: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';
}
}
}Stack Overflow用户
发布于 2020-02-07 16: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60116923
复制相关文章
相似问题
腾讯云开发者
