Question

当输入类型=＆＃34;复选框＆＃34;时，如何触发事件？检查？对于按钮，我只需使用事件＆＃39;点击＆＃39;创建一个addEventListener。使用复选框有没有类似的方法？

例如，我有两个容器，都包含一个复选框和一个div元素。当其中一个复选框被＆＃34;选中＆＃34;时，我希望他们的div元素（框）改变颜色或类似的东西。然后在未经检查的情况下回到第一个状态。

<div class="boxCont">
    <input type="checkbox" class="checkbox">
    <div class="box"></div>
</div>

<div class="boxCont">
    <input type="checkbox" class="checkbox">
    <div class="box"></div>
</div>

示例：https://jsfiddle.net/qua1ity/vs64yyrv/1/

这是否可以使用JavaScript，而无需更改HTML？

Answer 1

对于复选框，您可以使用onchange代替onclick，并在函数内检查this.checked的值是true还是false。< / p>

这是一个小提琴：https://jsfiddle.net/vs64yyrv/2/

我使用[].slice.call()来使用forEach而不是循环，因为我想要提醒单击了哪个复选框，并且您无法在循环中使用事件处理程序而不会丢失计数值。如果您不需要该索引，则只需使用

即可

var checks = document.querySelectorAll('.checkbox');

for(var i=0;i<checks.length;i++){
    checks[i].onchange = function(){
        if(this.checked) {
            //do your thing with `this`
        }
        else {
            //return to previous state
        }
    } // end handler
} // end loop

JavaScript - 复选框和事件

1 个答案: