Sprawdź, czy wszystkie pola wyboru są zaznaczone

139

Jak sprawdzić, czy wszystkie pola wyboru z class="abc"są zaznaczone?

Muszę to sprawdzić za każdym razem, gdy któryś z nich jest zaznaczony lub odznaczony. Czy robię to po kliknięciu czy zmieniam?

Święty
źródło

Odpowiedzi:

257

Myślę, że najłatwiej jest sprawdzić ten stan:

$('.abc:checked').length == $('.abc').length

Możesz to zrobić za każdym razem, gdy zaznaczone jest nowe pole wyboru:

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       //do something
    }
});
cbrandolino
źródło
2
lengthnie jest funkcją, myślę, że miałeś na myśli ..size()
Jishnu AP
3
Dzięki @TheSuperTramp! Miałem na myśli length, ale nigdy nie zapominam, że to własność, a nie metoda. Poprawione
cbrandolino
97
$('input.abc').not(':checked').length > 0
Porco
źródło
2
Idealne, czyste i eleganckie rozwiązanie. "if ($ ('input.abc'). not (": zaznaczone "). długość) {...}" również działa.
Skorunka František
1
Ta odpowiedź jest nieprawidłowa. Sprawdza, czy są zaznaczone pola wyboru. Ale pytanie brzmi: Sprawdź, czy wszystkie pola wyboru są zaznaczone . Tak poprawny kod jest: $('input.abc').not(':checked').length === 0.
hlcs
1
Ta odpowiedź jest lepsza niż zaakceptowana odpowiedź, jeśli weźmiesz pod uwagę wydajność. Zapętli się tylko raz, zamiast dwukrotnie.
Maarten Kieft
15

Możesz użyć change()

$("input[type='checkbox'].abc").change(function(){
    var a = $("input[type='checkbox'].abc");
    if(a.length == a.filter(":checked").length){
        alert('all checked');
    }
});

Wszystko to spowoduje sprawdzenie, czy łączna liczba .abcpól wyboru jest zgodna z całkowitą liczbą .abc:checked.

Przykład kodu na jsfiddle .

Mark Coleman
źródło
Nie bardzo wiem dlaczego, ale moja a.length daje mi wartość 8, podczas gdy mam tylko 4 pola wyboru.
mikołaj
To filterdobre rozwiązanie dla grupy pól wyboru, wielkie dzięki.
generalduka
5
$('.abc[checked!=true]').length == 0
manji
źródło
3

Część 1 Twojego pytania:

var allChecked = true;
$("input.abc").each(function(index, element){
  if(!element.checked){
    allChecked = false;
    return false;
  } 
});

EDYTOWAĆ:

Powyższa odpowiedź (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480) jest prawdopodobnie lepsza.

Dave L.
źródło
1

Kryteria wyszukiwania są jednym z następujących:

input[type=checkbox].MyClass:not(:checked)
input[type=checkbox].MyClass:checked

Prawdopodobnie chcesz połączyć się ze zdarzeniem zmiany.

Steve Wellens
źródło
1

Alternatywnie możesz również użyć każdego ():

// Cache DOM Lookup
var abc = $(".abc");

// On Click
abc.on("click",function(){

    // Check if all items in list are selected
    if(abc.toArray().every(areSelected)){
        //do something
    }

    function areSelected(element, index, array){
        return array[index].checked;
    }
});
Nick Cordova
źródło
1

Rozwiązanie niezależne od klasy

var checkBox = 'input[type="checkbox"]';
if ($(checkBox+':checked').length == $(checkBox).length) {
   //Do Something
}
PHPer
źródło
1

Oto jak to osiągnąłem w moim kodzie:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}
Jaime Montoya
źródło