JavaScript - 复选框和事件

【问题标题】：JavaScript - checkboxes and eventsJavaScript - 复选框和事件
【发布时间】：2015-04-20 22:05:10
【问题描述】：

当 type="checkbox" 的输入被选中时如何触发事件？对于按钮，我只需使用事件“点击”创建一个 addEventListener。有没有类似的方法可以用复选框来做到这一点？

例如，我有两个容器，都包含一个复选框和一个 div 元素。当其中一个复选框被“选中”时，我希望他们的 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/

在不改变 HTML 的情况下，JavaScript 是否可以做到这一点？

【问题讨论】：

标签： javascript events checkbox

【解决方案1】：

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

这是一个小提琴：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

【讨论】：

谢谢！我会试试看。