Sprawdź, czy pole wyboru NIE jest zaznaczone na click - jQuery

86

Chcę sprawdzić, czy pole wyboru nie zostało właśnie odznaczone, gdy użytkownik je kliknie. Powodem tego jest to, że chcę przeprowadzić walidację, gdy użytkownik usunie zaznaczenie pola wyboru. Ponieważ przynajmniej jedno pole wyboru musi być zaznaczone. Więc jeśli odznaczy ostatnią, to automatycznie sprawdza się ponownie.

Dzięki jQuery mogę łatwo dowiedzieć się, czy zostało to sprawdzone, czy nie:

$('#check1').click(function() {
    if($(this).is(':checked'))
        alert('checked');
    else
        alert('unchecked');
});

Ale tak naprawdę chcę mieć tylko instrukcję if, która sprawdza, czy pole wyboru właśnie zostało odznaczone.

Pomyślałem więc, że mogę to zrobić za pomocą następującego kodu:

$('#check2').click(function() {
    if($(this).not(':checked'))
        alert('unchecked');
    else
        alert('checked');
});

Ale to zawsze pokaże komunikat „niezaznaczony”. Nie do końca tego się spodziewałem ...

demo: http://jsfiddle.net/tVM5H/

Więc ostatecznie potrzebuję czegoś takiego:

$('#check2').click(function() {
    if($(this).not(':checked')) {
        // Got unchecked, so something!!!
    }
});

Ale oczywiście to nie działa. Raczej nie chcę używać pierwszego przykładu, ponieważ wtedy miałbym niepotrzebne stwierdzenie „else”, gdy potrzebuję tylko jednego stwierdzenia „if”.

Po pierwsze, czy to błąd jQuery? Bo dla mnie to nieoczekiwane zachowanie. A po drugie, czy ktoś ma pomysł na dobrą alternatywę?

w00
źródło

Odpowiedzi:

50

Odpowiedź już opublikowana będzie działać. Jeśli chcesz skorzystać z jQuery: nie możesz tego zrobić:

if ($(this).is(':not(:checked)'))

lub

if ($(this).attr('checked') == false)
chris_code
źródło
Pierwszy przykład w tej odpowiedzi wydaje się najłatwiejszy do odczytania ze wszystkich opcji, więc głosuję za tym.
Toby 1 Kenobi
5

jQuery do sprawdzenia, czy jest zaznaczone? Naprawdę?

if(!this.checked) {

Nie używaj bazooki do pracy brzytwą.

TheZ
źródło
4
Jeśli używasz jQuery do znalezienia elementu, powinien on brzmieć$(this)[0].checked
Chris
@HoldOffHunger Jest to część natywnego elementu wejściowego: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… Jeśli używasz jQuery, to Chris ma poprawną składnię w komentarzu nad twoim.
TheZ
@TheZ: Fajnie! Tak, masz rację, odpowiedź Chrisa jest dobra. Sugestia: dodać go do odpowiedzi z kredytem? Zarówno OP, jak i najlepsze odpowiedzi skłaniają się w kierunku $ (selector). To ('...'), które jest czystym rozwiązaniem jQuery. Używanie tylko .checkedtam, gdzie mają .is('checked'), nie będzie działać samo.
HoldOffHunger
5
$(document).ready(function() {
        $("#check1").click(function() {
            var checked = $(this).is(':checked');
            if (checked) {
                alert('checked');
            } else {
                alert('unchecked');
            }
        });
    });
Nanhe Kumar
źródło
2

Sprawdź niektóre odpowiedzi na to pytanie - myślę, że może dotyczyć Twojego:

jak uruchomić funkcję kliknięcia po domyślnym zachowaniu elementu

Myślę, że masz niespójność w implementacji onclickfunkcji w przeglądarce . Niektórzy wybierają przełączanie pola wyboru przed uruchomieniem zdarzenia, a niektórzy po.

Nathan Friend
źródło
To też jest naprawdę ważne.
TheZ
I dlatego jQuery, aby sprawdzić, czy jest zaznaczone. Naprawdę. ;)
JoeBrockhaus
1

Odpowiedź już opublikowana. Ale możemy również użyć jquery w ten sposób

próbny

$(function(){
    $('#check1').click(function() {
        if($('#check1').attr('checked'))
            alert('checked');
        else
            alert('unchecked');
    });

    $('#check2').click(function() {
        if(!$('#check2').attr('checked'))
            alert('unchecked');
        else
            alert('checked');
    });
});
Praveen04
źródło
0

Zrób to w ten sposób

if (typeof $(this).attr("checked") == "undefined" )

// To check if checkbox is checked
if( $(this).attr("checked")=="checked")
Usman Younas
źródło
To może być po prostu this.checked. Pierwsza linia typeoftam nie potrzebuje (nigdy nie podniesie ReferencError). Powinieneś także używać prop()zamiast attr(), co zwróci wartość logiczną, dzięki czemu drugi również będzie zbędny.
alex