JavaScript

Question

如何在选中类型="checkbox" 的输入时触发事件？对于按钮，我只需创建一个带有事件 'click' 的 addEventListener。是否有类似的方法来使用复选框？

例如我有两个容器，都包含一个复选框和一个 div 元素。当其中一个复选框是 "checked" 时，我希望它们的 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 是否可行？

Answer 1

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

这是一个 fiddle: 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 - 复选框和事件

JavaScript - checkboxes and events

checkbox

events