javascript - 在更改的多个复选框之一上运行 javascript 函数

Question

我想在选中或取消选中复选框时运行一个函数。但是，我有大约 70 个复选框。它们都在一个div中。我如何编写一个命令来对其中任何一个被更改做出反应？

Answer 1

事件冒泡，因此您只需将 onchange 处理程序附加到 div 并用于e.target获取已更改的复选框。这是一个简单的例子：

HTML：

<div id="checkbox-container">
    <input type="checkbox" name="one" />
    <input type="checkbox" name="two" />
    <input type="checkbox" name="three" />
    <input type="checkbox" name="pizza" />
</div>

​<strong>Javascript：

document.getElementById('checkbox-container').onchange = function(e){
    alert(e.target.name);
}​

这是一个JSFiddle

Answer 2

根据 ascii-time 的回答，您可以使用事件委托。但是，请注意 change 事件不会在所有浏览器中冒泡，并且您还必须支持 IE 事件模型，因此请使用 click 事件并过滤掉您不想要的元素（或添加替代响应）：

<div id="checkbox-container">
     <input type="checkbox" name="one">
     <input type="checkbox" name="two">
     <input type="checkbox" name="three">
     <input type="checkbox" name="pizza">
</div>

<script type="text/javascript">

(function() {

  var container = document.getElementById('checkbox-container');

  if (container) {
    container.onclick = function(evt) {
      evt = evt || window.event;
      var el = evt.target || evt.srcElement;

      if (el && el.nodeType == 1 && el.type == 'checkbox') {
        alert(el.name + ' is ' + (el.checked? '':'not') + ' checked'); 
      }
    }
  }
}())

</script>

请注意，脚本必须位于容器元素下方。就在结束正文标签之前是好的。