检查复选框是否被选中，returns addEventListener 不是函数

Question

您好，我得到了以下代码片段，我在其中尝试根据复选框是否已选中来打印 console.log。

var checkbox = document.querySelectorAll('.customer-club-widget__gender__categories .form__input-checkbox');

checkbox.addEventListener("change", function() {

    var isChecked = checkbox.checked;
    if(isChecked){ //checked
        console.log('checked');
    }else{ //unchecked
        console.log('unchecked');
    }
});

我不断收到以下错误：

Uncaught TypeError: checkbox.addEventListener is not a function and a cant figure out why this is happening.

Answer 1

您收到错误消息是因为 querySelectorAll() return 一个元素数组，而您正在尝试将事件附加到该数组，否则您应该遍历它以将更改事件附加到其中的每个元素，例如：

//Loop through the array elements and attach the event
for (var i = 0; i < checkbox.length; i++) {
  checkbox[i].addEventListener("change", checkedOrNot);
}

//Define separate function
function checkedOrNot() {
  var isChecked = this.checked;

  if (isChecked) { //checked
    console.log('checked');
  } else { //unchecked
    console.log('unchecked');
  }
}

希望这有帮助。

var checkbox = document.querySelectorAll('.customer-club-widget__gender__categories .form__input-checkbox');

for (var i = 0; i < checkbox.length; i++) {
  checkbox[i].addEventListener("change", checkedOrNot);
}

function checkedOrNot() {
  var isChecked = this.checked;

  if (isChecked) { //checked
    console.log('checked');
  } else { //unchecked
    console.log('unchecked');
  }
}

<div class="customer-club-widget__gender__categories">
  <input type="checkbox" class="form__input-checkbox" /> A
  <br>
  <input type="checkbox" class="form__input-checkbox" /> B
  <br>
  <input type="checkbox" class="form__input-checkbox" /> C 
  <br>
  <input type="checkbox" class="form__input-checkbox" /> D
</div>

检查复选框是否被选中，returns addEventListener 不是函数

Checking if checkboxes are checked ornot, returns addEventListener is not a function

javascript

checkbox

onchange