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

Question

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

这是相关的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)
          }
      });
  }
}

HTML：

<label><input type = "checkbox" onclick= "test()" name ="one" value ="one">test<br></label>
<label><input type = "checkbox" onclick= "test()" name ="two" value ="two" > test 1<br></label>
<label><input type = "checkbox" onclick= "test()" name ="three" value ="three" >test 2<br></label>
<label><input type = "checkbox" onclick= "test()" name ="four" value ="four" >test 3<br></label>
<label><input type = "checkbox" onclick= "test()" name ="five" value ="five" >test 4<br></label>
<label><input type = "checkbox" onclick= "test()" name ="six" value ="six" >Test 5<br></label>

如果单击复选框，则应该在控制台中显示复选框的名称。

但是，确实发生了一些奇怪的事情，我不明白为什么会这样。 我不清楚它为什么会发生，但还不清楚。

例如，当我单击第一个复选框时。 我单击名为“一个”的复选框。 控制台显示：
一个（根据需要）

但是，如果我单击下一个复选框（例如，我单击了名为“四个”的复选框）。 在控制台中，它显示：
四
四

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

依此类推。...（每次单击另一个复选框时，都会重复显示在控制台上的复选框名称）

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

在此先感谢任何可能对这种情况发生原因有所了解的人。

Answer 1

问题是您已经设置了内联click事件处理程序，然后单击复选框时，可以使用.addEventListener()以编程方式为change事件设置第二个事件处理程序。 因此，每当您单击复选框时，都会添加另一个change事件处理程序--如果复选框值被更改，则与change事件关联的每个和每个处理程序都将运行。 单击复选框的次数越多，设置的change事件就越多。

现在，为了change复选框，您需要click它。 因此，未来的click会同时触发click和change事件。 由于这种change可以与复选框和单选按钮一起使用，因此通常不使用它，而click处理程序通常可以完成工作。

不应使用内联事件处理程序，它们是20多年的老技术， 存在很多错误 。

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

 // Get all the checkboxes into an Array var checkBoxes = Array.prototype.slice.call(document.querySelectorAll('input[type=checkbox]')); // Loop over the array only to set up event handlers on them checkBoxes.forEach(function(cb) { // Set up an event handler cb.addEventListener('change',function(){ // You don't need to loop again, just use the value of "this" if(this.checked){ console.log(this.value); } }); }); 

 <label><input type = "checkbox" name ="one" value ="one">test<br></label> <label><input type = "checkbox" name ="two" value ="two" > test 1<br></label> <label><input type = "checkbox" name ="three" value ="three" >test 2<br></label> <label><input type = "checkbox" name ="four" value ="four" >test 3<br></label> <label><input type = "checkbox" name ="five" value ="five" >test 4<br></label> <label><input type = "checkbox" name ="six" value ="six" >Test 5<br></label> 

Answer 2

问题在于，每当单击一个复选框时，您都会将事件侦听器添加到每个复选框。 这意味着每次您单击复选框时，都会显示更多处理程序，这些处理程序将记录到控制台。

解码事件的顺序：

• 您的页面已加载，到目前为止尚未完成任何操作。
• 单击复选框=>触发onclick。
• 调用test（）时，用于change的事件侦听器change附加到每个复选框。
• onchange事件将触发并到达已安装的处理程序。
• 该事件将记录到控制台。
• 单击另一个复选框=>触发onclick。
• 调用test（）时，将另一个用于change事件侦听器附加到每个复选框。
• onchange事件将触发并到达已安装处理程序的第一个实例。
• 该事件将记录到控制台。
• onchange事件到达处理程序的第二个实例。
• 该事件再次记录到控制台。
• 等等...

如果您想跟踪所有情况，建议使用以下JS来消除此问题（根本不需要onclick属性）：

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);

Answer 3

您将使用document.querySelectorAll获取页面上的所有复选框。 然后，您将循环浏览for循环中所有复选框的列表。

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

var checkBox = event.target.id;

然后只需使用console.log(document.getElementById(checkBox).value)显示名称