JavaScript - 複選框和事件

Question

如何檢查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/

這可能與JavaScript的，在不改變HTML？

Answer 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