Jak sprawdzić, czy wszystkie pola wyboru są odznaczone?

Question

Próbuję wykonać funkcję, aby sprawdzić, czy wszystkie pola wyboru są odznaczone. Mam podobną funkcję dla pól tekstowych. Ponieważ nie pracowałem wcześniej z polami o wiele wcześniej, nie jestem pewien, jak to zmienić, oprócz zmiany wejścia [type = text] na input [type = checkbox]. Czy ktoś może mi pomóc? Dzięki.

var textinputs = document.querySelectorAll('input[type=text]'); 
var empty = [].filter.call(textinputs, function(el) { 
    return !el.value 
}); 

    if (textinputs.length == empty.length) { 
     alert("None filled"); 
     return false; 
} 

Answer 1

Poniższy powinno załatwić sprawę:

var textinputs = document.querySelectorAll('input[type=checkbox]'); 
var empty = [].filter.call(textinputs, function(el) { 
    return !el.checked 
}); 

if (textinputs.length == empty.length) { 
    alert("None filled"); 
    return false; 
} 

Answer 2

można uprościć niewiele, biorąc pod uwagę, że jesteś w stanie wykorzystać querySelectorAll():

var checked = document.querySelectorAll('input:checked'); 

if (checked.length === 0) { 
    // there are no checked checkboxes 
    console.log('no checkboxes checked'); 
} else { 
    // there are some checked checkboxes 
    console.log(checked.length + ' checkboxes checked'); 
} 

JS Fiddle (with no checkboxes checked).

JS Fiddle (with some checkboxes checked).

Albo, jeśli wszystko co chcesz jest wartością logiczną, aby wskazać, czy jest zaznaczone pole wyboru, do stosowania w funkcji:

var isChecked = document.querySelectorAll('input:checked').length === 0 ? false : true; 
return isChecked; 

Proof-of-concept demo.

Można oczywiście uniknąć tworzenia zmiennej i po prostu zwrócić wynik potrójnego; Użyłem tylko tej zmiennej, aby spróbować wyjaśnić, co dokładnie zwróciłem/przetestowałem.

referencyjny:

• :checked pseudo-class.

Answer 3

Polecam odstępy nazwy z klasy lub id

var checked = document.querySelectorAll('input.myClassName:checked'); 

//or 

var checked = document.querySelectorAll('input#myIdName:checked'); 

if (checked.length === 0) { 

    console.log('no checkboxes checked'); 
} else { 

    console.log(checked.length + ' checkboxes checked'); 
} 

Answer 4

Działa to dla mnie dać wszystkim swoim wyboru jedną nazwę klasy następnie:

 if ($('.ClassName:checked').length == 0) { 
      // do your job 
     }