Pytanie Jak sprawdzić, czy pole wyboru jest zaznaczone w jQuery?


Muszę sprawdzić checked Właściwość pola wyboru i wykonać akcję opartą na sprawdzonej właściwości za pomocą jQuery.

Na przykład, jeśli pole wyboru wieku jest zaznaczone, to muszę pokazać pole tekstowe, aby wprowadzić wiek, w przeciwnym razie ukryć pole tekstowe.

Ale następujący kod zwraca false domyślnie:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

Jak pomyślnie wysłać zapytanie do checked własność?


3921


pochodzenie


Sprawdź inne sposoby zrobienia tego za pomocą jQuery tutaj stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
$('#isAgeSelected').change(function(){ alert($('#chkSelect').attr('checked')); }); - Khaled.K
$ ('# isAgeSelected') zwraca kolekcję, zastępując ją: $ ('# isAgeSelected') [0] .checked - zamoldar
Dlaczego nie $('#isAgeSelected').checked - mmcrae
Ponieważ selektory jQuery zwracają tablicę, możesz użyć $('#isAgeSelected')[0].checked - Felipe Leão


Odpowiedzi:


Jak pomyślnie wysłać zapytanie do zaznaczonej właściwości?

The checked właściwość pola wyboru DOM da ci checked stan elementu.

Biorąc pod uwagę twój istniejący kod, możesz zrobić to:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Istnieje jednak znacznie ładniejszy sposób, aby to zrobić, używając toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>


3102



Próbowałem również powyższego warunku, ale zwraca tylko false - Prasad
$ ("# txtAge"). toggle (this.checked); Dokładnie tak samo jak $ ("# txtAge"). Toggle (). Tak więc, jeśli z jakiegoś powodu stan jest sprawdzany, a następny div jest ukryty (kliknąłeś przycisk Wstecz w przeglądarce) - nie zadziała zgodnie z oczekiwaniami. - Maksim Vi.
@Chiramisu - Gdybyś przeczytał odpowiedź w całości, zauważyłbyś, że moja edycja nie używa is(':checked')biznes. - karim79
Aby ustawić: $ ("# chkmyElement") [0] .checked = true; uzyskać: if ($ ("# chkmyElement") [0] .checked) - JJ_Coder4Hire
To nie jest odpowiedź na pytanie. this.checked nie jest jQuery, o co prosił OP. Działa również tylko wtedy, gdy użytkownik kliknie na pole wyboru, które nie jest częścią pytania. Pytanie brzmi, znowu How to check whether a checkbox is checked in jQuery? w dowolnym momencie z lub bez klikania pola wyboru oraz w jQuery. - Marc Compte


Użyj jQuery jest() funkcjonować:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

1550



Jeśli nie potrzebujesz czasu trwania, złagodzenia itp., Możesz użyć $("#txtAge").toggle($("#isAgeSelected").is(':checked')) - naor
+1 Istnieją różne sposoby uzyskania zaznaczonej właściwości. Niektóre są wymienione tutaj - user3199690
@NickG Właściwie jQuery robi mieć : widoczny selektor - hvdd
@hvdd Wiem - powiedziałem "właściwość", a nie selektor. - NickG
@NickG ... Nie rozumiem o co Ci chodzi. jQuery nie ma .visible "własność" (własność? masz na myśli metoda?), ponieważ element no HTML ma widoczny własność. Oni mają display  własność stylu i jest nieco bardziej skomplikowany niż włączanie / wyłączanie. - xDaizu


Używanie jQuery> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

Korzystanie z nowej metody właściwości:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

473



Chciałbym wiedzieć, dlaczego to nie jest odpowiedź ... jeśli używasz jquery w ogóle, a następnie .prop metoda to zaprojektowany sposób na sprawdzenie rekwizytów. ... ... Jeśli masz zamiar zrobić .is(":checked") podejście, to dobrze, ale nie jest to zaprojektowany sposób, aby to zrobić za pomocą jquery. dobrze? - dsdsdsdsd
@dsdsdsdsd prawdopodobnie dlatego, że potrzebuje kolejnego kroku zgodności wstecznej (mam teraz do czynienia z tym samym problemem). - user98085
.is(":checked") i .prop("checked") są poprawnymi sposobami uzyskania tego samego wyniku w jQuery, .is będzie działać we wszystkich wersjach, .prop wymaga 1.6+ - gnarf
Jeśli użyjesz .attr('checked') w jQuery 1.11.3 masz niezdefiniowane, jeśli używasz .prop('checked'), otrzymasz true / false. Nie rozumiem, dlaczego zmienili to tak, aby działało w ten sposób, gdy starsze przeglądarki nie obsługują późniejszych wersji jQuery, które zostały wprowadzone .prop() i dlatego potrzeba .attr(). Jedyną oszczędnością jest to, że starsze przeglądarki (tj. IE 8) nie mogą obsługiwać niczego> jQuery 1.9. Mam nadzieję, że tego nie zrobili (make .attr('checked') = undefined) w tej wersji! Na szczęście zawsze jest this.checked. - vapcguy


jQuery 1.6+

$('#isAgeSelected').prop('checked')

jQuery 1.5 i poniżej

$('#isAgeSelected').attr('checked')

Dowolna wersja jQuery

// Assuming an event handler on a checkbox
if (this.checked)

Wszystkie kredyty idą do Xian.


177



Technicznie, this.checked używa prostego Javascript. Ale uwielbiam tę odpowiedź w wersji cross-jQuery! - vapcguy


Używam tego i działa to absolutnie dobrze:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Uwaga: Jeśli pole wyboru jest zaznaczone, zwróci true, inaczej niezdefiniowane, więc lepiej sprawdź wartość "TRUE".


148



Działa to, ponieważ $ ("# checkkBoxId"). Attr ("sprawdzone") zwraca "sprawdzony" lub "" (pusty ciąg). I pusty ciąg to falsy, niepusty łańcuch to prawda, zobacz wartości prawdy / falsy docs.nodejitsu.com/articles/javascript-conventions/... - Adrien Be
Przez jquery 2.1.x powraca zawsze sprawdzane, jeśli jest zaznaczone domyślnie ... Nie wiem, czy to zachowanie jest zamierzone, ale z pewnością nie działa (domyślam się, że jest to błąd) ... The Val () też nie działa, pozostaje "włączony". Funkcja prop () działa poprawnie i działa funkcja dom.checked. - inf3rno
Problem pojawia się, gdy musisz obsługiwać starsze przeglądarki .attr()! Gdyby tylko zostawili wystarczająco dobrze w spokoju ... Znalazłem kolejną odpowiedź, która mówi, że możesz po prostu użyć this.checked dla rozwiązania cross-jQuery, ponieważ jest to po prostu JavaScript. - vapcguy


Posługiwać się:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned


115





Od jQuery 1.6, zachowanie jQuery.attr() uległa zmianie i użytkownicy są zachęcani do nieużywania go w celu pobrania stanu sprawdzonego elementu. Zamiast tego powinieneś użyć jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Dwie inne możliwości to:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

105



z jakiegoś powodu, prop ("sprawdzony") pracował dla mnie, ale nie jest (": sprawdzone") - BraveNewMath
i $ ("# txtAge") [0] .checked - Yevgeniy Afanasyev


To zadziałało dla mnie:

$get("isAgeSelected ").checked == true

Gdzie isAgeSelected jest identyfikatorem kontroli.

Również @ karim79 odpowiedź działa w porządku. Nie jestem pewien, co przegapiłem w czasie, gdy testowałem to.

Uwaga, to jest odpowiedź używa Microsoft Ajax, a nie jQuery


82





Jeśli używasz zaktualizowanej wersji jquery, musisz iść .prop metoda rozwiązania problemu:

$('#isAgeSelected').prop('checked') wróci true jeśli zaznaczone i false jeśli odznaczone. Potwierdziłem to i wcześniej natknąłem się na ten problem. $('#isAgeSelected').attr('checked') i $('#isAgeSelected').is('checked') wraca undefined co nie jest godną odpowiedzią na sytuację. Tak jak podano poniżej.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Mam nadzieję, że pomaga:) - Dzięki.


79



Dlaczego nie $('#isAgeSelected').checked ? - mmcrae
użyć .is potrzebujesz dwukropka $ ("# isAgeSelected"). jest (": sprawdzone") - Patrick


Używając Click obsługa zdarzeń dla właściwości checkbox jest niewiarygodna, ponieważ checked Właściwość może się zmienić podczas wykonywania samej obsługi zdarzeń!

Idealnie byłoby umieścić swój kod w change obsługa zdarzeń, taka jak jest uruchamiana za każdym razem, gdy zmieni się wartość pola wyboru (niezależnie od w jaki sposób tak się stało).

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});

54



Od wersji jQuery 1.7 .on() metoda jest preferowaną metodą dołączania procedur obsługi zdarzeń do dokumentu. - naor