在多個複選框中的一個上運行javascript函數

Question

我想在複選框被選中或未選中時運行一個函數。但是，我有大約70個複選框。他們都在一個分區內。我該如何編寫一個能夠對其中任何一個進行更改的命令？

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> 

的Javascript：

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

And here's a JSFiddle

Answer 2

基於ASCII時的回答，您可以使用事件代表團。但是，請注意，更改事件在所有瀏覽器中都不會冒泡，並且您還必須支持IE事件模型，因此請使用單擊事件並過濾掉不需要的元素（或添加備用響應）：

<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> 

請注意，該腳本必須位於容器元素下方。就在結束標籤正好之前。