Question

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

HTML

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

的Javascript

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); 

}

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

Answer 1

您需要在循环中使用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]，并且没有第四个列表项。

Answer 2

当处理程序实际运行时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">

Answer 3

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

我使用'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">

如果有很多复选框切换事件

3 个答案: