javascript - 为每个复选框添加一个 eventListener

Question

我正在寻找一种简洁明了的方法来向我的每个复选框添加事件监听器，而不必重复我的 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>

Answer 1

要么全选并遍历集合，然后将事件添加到集合中的每个元素。

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>

或事件委托(delegate)并使用事件对象来确定单击了哪个元素。

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>