向每个复选框添加一个eventListener

Adding an eventListener to each checkbox

本文关键字：一个 eventListener 添加 复选框      更新时间：2023-09-26

我正在寻找一种干净简洁的方法，将事件侦听器添加到我的每个复选框中，而不必重复我的Javascript代码，当涉及到JS时，我仍然耳濡目染，所以任何帮助都将不胜感激。

这是我迄今为止拥有的

   function exFunction() {};
// on-click
var x = document.getElementById("checkboxopt");
x.addEventListener("click", function(){
    console.log("Opt");
  });
var y = document.getElementById("checkboxopt1");
y.addEventListener("click", function(){
    console.log("Opt 1");
  });
var z = document.getElementById("checkboxopt2");
z.addEventListener("click", function(){
    console.log("Opt 2");
  });
<div id=""><input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"><br/></div>
<div id=""><input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"><br/></div>
<div id=""><input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"><br/></div>

选择all并在集合上循环，然后将事件添加到集合中的每个元素中。

var cbs = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(cbs, function (cb) {
    cb.addEventListener("click", function(){
        console.log(this.id);
    });
});
<div id="wrap">
  <div id="">
    <input name="checkboxopt" id="checkboxopt" value="true" type="checkbox">
  </div>
  <div id="">
    <input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox">
  </div>
  <div id="">
    <input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox">
  </div>
</div>

或事件委派，并使用事件对象来确定单击了哪个元素。

var wrapper = document.getElementById('wrap');
wrapper.addEventListener("click", function (evt) {
    var elem = evt.target;
    if (elem.name==="checkboxopt") {
        console.log(elem.id);
    }
});
<div id="wrap">
  <div id="">
    <input name="checkboxopt" id="checkboxopt" value="true" type="checkbox">
  </div>
  <div id="">
    <input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox">
  </div>
  <div id="">
    <input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox">
  </div>
</div>

您可以在每个复选框中迭代：

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for(var i = 0; i < checkboxes.length; i++){
     var checkbox = checkboxes[i];
     checkbox.addEventListener('click', function(){
         console.log(this);
     });
}

希望能有所帮助。

干杯

您可以使用for循环并在循环外创建函数。

var c = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < c.length; i++) {
  clickFunction(i)
}
function clickFunction(num) {
  c[num].addEventListener('click', function() {
    console.log('Opt ' + (num + 1));
  })
}
<div id=""><input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"><br/></div>
<div id=""><input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"><br/></div>
<div id=""><input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"><br/></div>

或者使用ES6，您可以使用let而不是具有块范围的var，因此在循环的每次迭代中都会创建新的i。

var c = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < c.length; i++) {
  c[i].addEventListener('click', function() {
    console.log('Opt ' + (i + 1));
  })
}
<div id=""><input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"><br/></div>
<div id=""><input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"><br/></div>
<div id=""><input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"><br/></div>

相关文章：