Javascript 复选框的奇怪onclick行为。选中复选框项目时尝试写入浏览器控制台

基本上，如果单击复选框，我希望在控制台上显示复选框的名称

下面是相关的javascript函数和HTML

javascript:

var list = [];

function test(){
      var checkBoxes = document.querySelectorAll('input[type=checkbox]')
    for(var i = 0; i < checkBoxes.length; i++) {
      checkBoxes[i].addEventListener('change',function(){
        if(this.checked){
          console.log(this.value)
          }
      });
  }
}

var list=[]；
功能测试（）{
var checkBoxes=document.querySelectorAll（'input[type=checkbox]”）
对于（变量i=0；i

HTML:

测试

测试1

测试2

测试3

测试4

测试5

如果我单击复选框，它应该在控制台中显示复选框的名称 然而，一些非常奇怪的事情发生了，我不明白为什么会这样。我有一个模糊的线索，它为什么会发生，但它不是很清楚

例如，当我单击第一个复选框时。我点击名为“一”的复选框。 控制台显示：
一个（根据需要） 但是如果我点击下一个复选框（例如，我点击了名为“四”的复选框）。 在控制台中显示：
四个
四个

然后单击下一个复选框（如果是名为“五”的复选框） 控制台显示：
五个
五个
五个

依此类推……（每次单击另一个复选框时，递增地重复控制台上显示的复选框名称）

为什么会重复？当我点击复选框时，技术上应该有一个onclick事件。为什么要计算所有其他的值并重复console.log（this.value）位

---

提前感谢任何能够提供一些关于为什么会发生这种情况的想法的人

问题在于，您已经设置了内联

单击

事件处理程序，然后当您单击复选框时，您可以通过编程方式为

更改

事件设置第二个

.addEventListener（）

。因此，每次单击复选框时，都会添加另一个

change

事件处理程序--如果复选框值发生更改，则与

change

事件关联的每个处理程序都将运行。选中复选框越多，设置的

change

事件越多

现在，要

更改

复选框，您需要

单击它。因此，未来的
单击
将触发
单击
和
更改
事件。由于
change
使用复选框和单选按钮的这种方式，因此通常不使用它，而
单击
处理程序通常会执行此任务

不应使用内联事件处理程序，它们是一种已有20多年历史的技术

此外，您不需要循环处理程序中的复选框。您将使用循环来设置处理程序


//将所有复选框放入一个数组中
var checkbox=Array.prototype.slice.call（document.querySelectorAll（'input[type=checkbox]）；
//仅在数组上循环以在其上设置事件处理程序
复选框。forEach（函数（cb）{
//设置事件处理程序
cb.addEventListener（'change'，function（））{
//您不需要再次循环，只需使用“this”的值
如果（选中此项）{
console.log（this.value）；
}
});
});
测试

测试1

测试2

测试3

测试4

测试5
问题在于，您已经设置了内联
单击
事件处理程序，然后当您单击复选框时，您通过
.addEventListener（）
以编程方式为
更改
事件设置了第二个事件处理程序。因此，每次单击复选框时，都会添加另一个
change
事件处理程序--如果复选框值发生更改，则与
change
事件关联的每个处理程序都将运行。选中复选框越多，设置的
change
事件越多

现在，要
更改
复选框，您需要
单击它。因此，未来的
单击
将触发
单击
和
更改
事件。由于
change
使用复选框和单选按钮的这种方式，因此通常不使用它，而
单击
处理程序通常会执行此任务

不应使用内联事件处理程序，它们是一种已有20多年历史的技术

此外，您不需要循环处理程序中的复选框。您将使用循环来设置处理程序


//将所有复选框放入一个数组中
var checkbox=Array.prototype.slice.call（document.querySelectorAll（'input[type=checkbox]）；
//仅在数组上循环以在其上设置事件处理程序
复选框。forEach（函数（cb）{
//设置事件处理程序
cb.addEventListener（'change'，function（））{
//您不需要再次循环，只需使用“this”的值
如果（选中此项）{
console.log（this.value）；
}
});
});
测试

测试1

测试2

测试3

测试4

测试5
您将使用
文档获取页面上的所有复选框。querySelectorAll
。然后在for循环中遍历所有复选框的列表

您可以通过单击获取元素的ID

var checkBox = event.target.id;

然后只需使用
console.log（document.getElementById（checkBox.value）
显示名称，就可以使用
document.querySelectorAll
获得页面上的所有复选框。然后在for循环中遍历所有复选框的列表

您可以通过单击获取元素的ID

var checkBox = event.target.id;

然后只需使用console.log（document.getElementById（checkBox.value））显示名称
问题是，每当单击一个复选框时，都会不断向每个复选框添加事件侦听器。这意味着每次单击复选框时，都会有更多的处理程序登录到控制台

解码的事件序列：

document.addEventListener('DOMContentLoaded', function (p_event) {
var l_checkboxes = document.querySelectorAll('input[type="checkbox"]');
var l_item;

  for(l_item of l_checkboxes)
    {
    l_item.addEventListener('change', function (p_event) {
      if(p_event.target.checked)
        console.log(p_event.target.value);
      }, false);
    }
  }, false);