代码之家 › 专栏 › 技术社区 › chu8

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

onclick checkbox javascript

chu8 · 技术社区 · 6 年前

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

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>

然而,一些非常奇怪的事情发生了,我不明白为什么。我有一个模糊的线索,为什么会发生,但它不太清楚。

一个(根据需要)

但是如果我单击下一个复选框(例如,我单击了名为“四”的复选框)。
四

然后单击下一个复选框(如果是名为“五”的复选框)
五

五

以此类推……(每次单击另一个复选框时,递增地重复控制台上显示的复选框名称)

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

3 回复 | 直到 6 年前

Scott Marcus 6 年前

问题是你有内联的 click 事件处理程序已经设置好,当您单击复选框时,您可以通过编程方式为 change 事件 .addEventListener() . 所以每次你点击一个复选框,你就会添加另一个 改变 改变

现在,为了 改变 点击 是的。那么,未来呢会导致 点击 以及 改变 改变 与复选框和单选按钮一起使用,通常不使用,而是处理程序通常会完成这项工作。

不应该使用内联事件处理程序,它们是一种已有20多年历史的技术 has many faults .

此外,您不需要循环检查复选框 在里面 处理程序。你应该使用一个循环来设置处理程序。

// 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>

Robidu 6 年前

解码的事件序列:

您的页面已加载,到目前为止尚未执行任何操作。
单击复选框=>触发onclick。
change 附加到每个复选框。
onchange事件激发并到达已安装的处理程序。
事件将记录到控制台。
调用test(),另一个事件侦听器附加到每个复选框。
事件将记录到控制台。
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);

-1

Some_Dude 6 年前

您正在获取页面上的所有复选框 document.querySelectorAll . 然后在for循环中遍历所有复选框的列表。

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

var checkBox = event.target.id;

console.log(document.getElementById(checkBox).value)