チェックボックスがチェックされているかどうかをチェックします。返されない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()ので、エラーを取得している要素の配列を返し、あなたはこの配列にイベントを添付しようとしている、そうでありませんそれをループして、内部のすべての要素に変更イベントを添付する必要があります。

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