javascript - 选中/取消选中任何复选框时触发事件

Question

在我的 HTML 中，我有很多复选框。

<input type="checkbox"> Check me! 
<input type="checkbox"> Check me as well!
<input type="checkbox"> Check me too! 
<input type="checkbox"> This is a checkbox.
<input type="checkbox"> It is not a radio button.  
<input type="checkbox"> Just saying.  

(Even more checkboxes ..............)

如果没有 jQuery，如何在文档中的任何复选框发生更改时创建警报？

(checkbox那么多，每一个checkbox都加上onclick="alert('Hello!');"会很麻烦。)

Answer 1

如果没有 jQuery，你会这样做:

// get all the checkboxes on the page
var checkboxes = document.querySelectorAll('input[type=checkbox]');

// add a change event listener
for(var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('change', function(){
        console.log('the checkbox changed');
    });
}

注意:IE7 或更低版本不支持 document.querySelectorAll。

http://caniuse.com/queryselector