확인란이 선택되었는지 확인하고, 반환하지 않습니다. 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'); 
    } 
}); 

나는 다음과 같은 오류가 계속 : querySelectorAll() 반환 이후 요소의 배열을

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

Answer 1

당신은 오류가있어 그리고 당신은 다른 사람이 배열에 이벤트를 연결하려는 변경 이벤트를 반복하여 내부의 모든 요소에 변경 이벤트를 첨부해야합니다.

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