Question

I want to run a function when a checkbox is checked or unchecked. However, I have around 70 checkboxes. They are all within a div. How can I write one command that will react to any of them being changed?

Answer 1

Events bubble up, so you can just attach an onchange handler to the div and use e.target to get the checkbox that changed. Here’s a simple example of this:

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