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 事件 bubble up to parent elements您只需将一个事件监听器附加到父元素，它就会捕获由其子元素触发的每个事件。

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>