javascript - 循环通过复选框以将事件监听器添加到每个框

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);
    }
});