如果有多个复选框，则切换事件

If many check boxes toggle event

本文关键字：事件 复选框 如果      更新时间：2023-09-26

我想将切换事件添加到某些列表项的复选框中，例如

.HTML

<input type="checkbox" class="list" value="Apple">
<input type="checkbox" class="list" value="Banana">
<input type="checkbox" class="list" value="Cucumber">

爪哇语

var list = document.getElementsByClassName('list');
for(a=0; a<list.length; a++){
list[a].addEventListener('click',function(){
if ( list[a].checked ){ alert('Checked'); } else { alert('Unchecked'); }
}, false); 
}

当我检查时没有任何反应。

你需要在循环中使用this，而不是list[a].checked：

var list = document.getElementsByClassName('list');
for (a = 0; a < list.length; a++) {
    list[a].addEventListener('click', function () {
        if (this.checked) {
            console.log('Checked');
        } else {
            console.log('Unchecked');
        }
    }, false);
}
<input type="checkbox" class="list" value="Apple">
<input type="checkbox" class="list" value="Banana">
<input type="checkbox" class="list" value="Cucumber">

list[a]等效于代码运行时的list[3]，并且没有第四个列表项。

当你的处理程序实际运行时，a == list.length ，所以list[a]是未定义的（因为你的 JS 控制台会抱怨）。

相反，引用this以获取实际单击的元素：

function alertChecked() {
  if (this.checked) {
    alert('Checked');
  } else {
    alert('Unchecked');
  }
}
var list = document.getElementsByClassName('list');
for (a = 0; a < list.length; a++) {
  list[a].addEventListener('click', alertChecked, false);
}
<input type="checkbox" class="list" value="Apple">
<input type="checkbox" class="list" value="Banana">
<input type="checkbox" class="list" value="Cucumber">

另一种方法...在我看来更具可读性：-）

我改用了"change"事件以获得更好的兼容性（键盘导航）。而且我更喜欢使用 forEach 循环 ：-）

var list = document.getElementsByClassName('list');
var alertOnChange = function(event) {
  alert( event.srcElement.checked ? "checked!" : "unchecked!")
}
Array.prototype.forEach.call(list, function(element) {
  element.addEventListener('change', alertOnChange);
});
<input type="checkbox" class="list" value="Apple">
<input type="checkbox" class="list" value="Banana">
<input type="checkbox" class="list" value="Cucumber">

相关文章：