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

循环复选框以将addEventListener添加到每个框

1 个答案: