遍历复选框将addEventListener添加到每个框

Question

我试图将事件侦听器添加到每个复选框，作为onclick方法的替代方法。 我正在使用的代码很简单。

该代码可以在这里看到：

https://jsfiddle.net/Buleria28/5a6zL013/

或这里的Javascript：

function letter() {
 document.getElementById("display").innerHTML = "ABCD";
 }

var box = document.getElementsByName("test");
if (box[0].addEventListener) {
for (var i = 0; i < box.length; i++) {
   box[i].addEventListener("change", letter, false);
 }
} else if (box[0].attachEvent) {
 for (var i = 0; i < box.length; i++) {
   box[i].attachEvent("onchange", letter);
 }

HTML是：

<div>
<label><input type="checkbox" name="test" value="A">A</label>
<label><input type="checkbox" name="test" value="B">B</label>
<label><input type="checkbox" name="test" value="C">C</label>
<label><input type="checkbox" name="test" value="D">D</label>
</div>

Answer 1

如@mjkaufer在上面的注释中所指出的，在添加右花括号}之后，您的原始示例可以正常工作。

但是，有一种更简单的方法可以遍历复选框。 尝试使用forEach遍历document.getElementsByName("test")返回的每个元素：

function letter(){
    document.getElementById("display").innerHTML = "ABCD";
}

document.getElementsByName("test").forEach(function(element) {
    if (element.addEventListener) {
        element.addEventListener("change", letter, false);
    } else if (element.attachEvent) {
        element.attachEvent("onchange", letter);
    }
});