检查复选框是否被选中，返回 addEventListener 不是函数答案

【问题标题】：Checking if checkboxes are checked ornot, returns addEventListener is not a function检查复选框是否被选中，返回 addEventListener 不是函数
【发布时间】：2017-11-13 12:03:16
【问题描述】：

您好，我得到以下代码 sn-p，我尝试打印 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');
    }
});

我不断收到以下错误：

未捕获的类型错误：checkbox.addEventListener is not a function 并且无法弄清楚为什么会发生这种情况。

【问题讨论】：

querySelectorAll 返回一个数组..
querSelectorAll 返回一个数组。您需要遍历数组并将侦听器添加到所有项目。或者只是使用事件委托。
querySelectorAll 返回节点列表。如果你想在某个时间点为nodeList包含的每个节点添加监听器，可以使用developer.mozilla.org/en-US/docs/Web/API/…
dependent on if a checkbox，如果是单个复选框，请不要使用All 版本，而是使用querySelector(。

标签： javascript checkbox onchange

【解决方案1】：

您收到错误，因为 querySelectorAll() 返回了一个元素数组，并且您尝试将事件附加到该数组，否则您应该循环遍历它以将更改事件附加到里面的每个元素，比如：

//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>

【讨论】：