Javascript 为类中的所有复选框添加事件列表

Question

我正在尝试为类中的所有复选框添加事件列表器。我可以将事件侦听器添加到类中。如何添加到该类中的所有复选框？

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

Answer 1

由于 JS 事件会向上冒泡到父元素，因此您只需将一个事件侦听器附加到父元素，它将捕获其子元素触发的每个事件。

document.querySelector('#container').onclick = function(ev) {
  if(ev.target.value) {
    console.log(ev.target.checked, ev.target.value);
  }
}

<div id="container">
  <input type="checkbox" value="Bike">I have a bike<br>
  <input type="checkbox" value="Car">I have a car<br>
  <input type="checkbox" value="Flower">I have a flower<br>
</div>