Muszę sprawdzić checked
właściwość pola wyboru i wykonać akcję na podstawie sprawdzonej właściwości za pomocą jQuery.
Na przykład, jeśli pole wyboru wiek jest zaznaczone, muszę pokazać pole tekstowe, aby wprowadzić wiek, w przeciwnym razie ukryj pole tekstowe.
Ale false
domyślnie zwraca następujący kod :
if ($('#isAgeSelected').attr('checked'))
{
$("#txtAge").show();
}
else
{
$("#txtAge").hide();
}
<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 selected
</div>
Jak pomyślnie wyszukać checked
właściwość?
javascript
jquery
html
checkbox
Prasad
źródło
źródło
$('#isAgeSelected').checked
$('#isAgeSelected')[0].checked
Odpowiedzi:
checked
Właściwość elementu checkbox DOM dajechecked
stan elementu.Biorąc pod uwagę istniejący kod, możesz to zrobić:
Jest jednak o wiele ładniejszy sposób, używając
toggle
:źródło
is(':checked')
firmy.this.checked
nie jest jQuery, jak poprosił PO. Działa także tylko wtedy, gdy użytkownik kliknie pole wyboru, które nie jest częścią pytania. Pytanie brzmi:How to check whether a checkbox is checked in jQuery?
w dowolnym momencie z lub bez kliknięcia pola wyboru i w jQuery.Użyj funkcji is () jQuery :
źródło
$("#txtAge").toggle($("#isAgeSelected").is(':checked'))
.visible
„właściwości” ( właściwość ? masz na myśli metodę ?), ponieważ element no HTML ma widoczną właściwość. Majądisplay
właściwość stylu i jest nieco bardziej złożona niż włączanie / wyłączanie.Korzystanie z jQuery> 1.6
Za pomocą nowej metody właściwości:
źródło
.prop
metoda jest zaprojektowanym sposobem sprawdzania rekwizytów. .. ... Jeśli masz zamiar zastosować to.is(":checked")
podejście, w porządku, ale nie jest to zaprojektowany sposób na wykonanie tego przy użyciu jquery. dobrze?.is(":checked")
i.prop("checked")
oba są poprawnymi sposobami uzyskania tego samego wyniku w jQuery,.is
będą działać we wszystkich wersjach,.prop
wymaga wersji.attr('checked')
w jQuery 1.11.3, stajesz się niezdefiniowany, a jeśli użyjesz.prop('checked')
, otrzymasz true / false. Nie rozumiem, dlaczego zmienili to, aby działało w ten sposób, skoro starsze przeglądarki nie obsługują późniejszych wersji jQuery, które zostały wprowadzone.prop()
i dlatego są potrzebne.attr()
. Jedyną zaletą jest to, że starsze przeglądarki (tj. IE 8) nie obsługują niczego> jQuery 1.9. Mam nadzieję, że nie zrobili tego (make.attr('checked')
= undefined) w tej wersji! Na szczęście zawsze tak jestthis.checked
.jQuery 1.6+
jQuery 1.5 i poniżej
Dowolna wersja jQuery
Cały kredyt należy do Xian .
źródło
this.checked
używa prostego Javascript. Ale uwielbiam tę odpowiedź między wersjami jQuery!Korzystam z tego i działa absolutnie dobrze:
Uwaga: Jeśli pole wyboru jest zaznaczone, zwróci true w przeciwnym razie niezdefiniowany, więc lepiej sprawdź wartość „PRAWDA”.
źródło
.attr()
! Gdyby tylko zostawili wystarczająco dobrze w spokoju ... Znalazłem inną odpowiedź tutaj, mówiąc, że możesz po prostu użyćthis.checked
rozwiązania cross-jQuery, ponieważ jest to po prostu Javascript.Posługiwać się:
źródło
Od wersji jQuery 1.6 zachowanie się
jQuery.attr()
zmieniło i użytkownicy są zachęcani do nieużywania go do pobierania stanu sprawdzonego elementu. Zamiast tego należy użyćjQuery.prop()
:Dwie inne możliwości to:
źródło
To działało dla mnie:
Gdzie
isAgeSelected
jest identyfikator kontroli.Również użytkownika @ karim79 odpowiedź działa dobrze. Nie jestem pewien, co przeoczyłem w czasie, gdy to testowałem.
Uwaga: ta odpowiedź używa Microsoft Ajax, a nie jQuery
źródło
== true
Jeśli używasz zaktualizowanej wersji jquery, musisz wybrać
.prop
metodę rozwiązania problemu:$('#isAgeSelected').prop('checked')
zwróci,true
jeśli zaznaczone, afalse
jeśli niezaznaczone. Potwierdziłem to i natknąłem się na ten problem wcześniej.$('#isAgeSelected').attr('checked')
i$('#isAgeSelected').is('checked')
powraca,undefined
co nie jest godną odpowiedzią na sytuację. Zrób tak, jak podano poniżej.Mam nadzieję, że to pomaga :) - Dzięki.
źródło
$('#isAgeSelected').checked
?Korzystanie z
Click
procedury obsługi zdarzeń dla właściwości checkbox jest zawodne, ponieważchecked
właściwość może się zmieniać podczas wykonywania samej procedury obsługi zdarzeń!Idealnie byłoby, gdybyś chciał umieścić swój kod w
change
module obsługi zdarzeń, takim jak uruchamiany za każdym razem, gdy zmienia się wartość pola wyboru (niezależnie od tego , jak to się robi).źródło
.on()
metoda jest preferowaną metodą dołączania procedur obsługi zdarzeń do dokumentu.Posługiwać się:
Może to pomóc, jeśli chcesz, aby wymaganą czynność trzeba było wykonać tylko wtedy, gdy zaznaczysz pole, a nie w chwili usunięcia zaznaczenia.
źródło
Postanowiłem opublikować odpowiedź, jak zrobić dokładnie to samo bez jQuery. Tylko dlatego, że jestem buntownikiem.
Najpierw dostajesz oba elementy według ich identyfikatora. Następnie przypisujesz
onchange
zdarzenie pola wyboru funkcję, która sprawdza, czy pole wyboru zostało zaznaczone, i odpowiednio ustawiahidden
właściwość pola tekstowego wieku. W tym przykładzie za pomocą operatora trójskładnikowego.Oto skrzypce do przetestowania.
Uzupełnienie
Jeśli problemem jest kompatybilność z różnymi przeglądarkami, proponuję ustawić
display
właściwość CSS na none i inline .Wolniejszy, ale kompatybilny z różnymi przeglądarkami.
źródło
.hidden
nie jest bardzo przeglądarkowy, chociaż podoba mi się to rozwiązanie :)style
. To niefortunne, ponieważ.hidden
wydajność jest znacznie lepsza .Wierzę, że możesz to zrobić:
źródło
Natrafiłem na dokładnie ten sam problem. Mam pole wyboru ASP.NET
W kodzie jQuery użyłem następującego selektora, aby sprawdzić, czy pole wyboru zostało zaznaczone, czy nie, i wydaje się, że działa jak urok.
Jestem pewien, że możesz także użyć identyfikatora zamiast CssClass,
Mam nadzieję, że to Ci pomoże.
źródło
Istnieje wiele sposobów sprawdzenia, czy pole wyboru jest zaznaczone, czy nie:
Sposób sprawdzenia za pomocą jQuery
Sprawdź przykład lub dokument:
http://api.jquery.com/attr/
http://api.jquery.com/prop/
źródło
Ten kod ci pomoże
źródło
To działa dla mnie:
źródło
To jest inna metoda na zrobienie tego samego:
źródło
Użyj tego:
Długość jest większa od zera, jeśli pole wyboru jest zaznaczone.
źródło
Mój sposób na zrobienie tego to:
źródło
Zwraca się,
true
jeśli dane wejściowe są zaznaczone, afalse
jeśli nie są.źródło
.attr('checked')
w tym, że nie zawsze zwraca prawidłowy stan. Zgodnie Salman A „s odpowiedzi (i być może innych”), jest to bezpieczniejsza opcja skorzystania z.prop('checked')
zamiast. Poza tym można również zadeklarowaćundefined
jakovar undefined = 'checked';
..prop('checked')
wydaje się teraz lepszą odpowiedzią. W chwili pisania tego tekstu nie był tak wiarygodny. Nie rozumiem ani nie uważam, że dobrym pomysłem jest ponowne zdefiniowanie niezdefiniowanego.typeof (x) !== "undefined"
źródło
Możesz użyć:
Oba powinny działać.
źródło
1) Jeśli Twój znacznik HTML to:
zastosowane attr:
Jeśli zastosowano rekwizyt:
2) Jeśli Twój znacznik HTML to:
zastosowane attr:
Zastosowana prop:
źródło
Ten przykład dotyczy przycisku.
Spróbuj wykonać następujące czynności:
źródło
Najlepsza odpowiedź nie zrobiła tego dla mnie. Tak było jednak:
Zasadniczo po kliknięciu elementu # li_13 sprawdza on, czy element # agree (który jest polem wyboru) jest sprawdzany za pomocą
.attr('checked')
funkcji. Jeśli jest to fadeIn element #saveForm, a jeśli nie fadeOut element saveForm.źródło
Używam tego:
źródło
Chociaż zaproponowałeś rozwiązanie JavaScript dla swojego problemu (wyświetlanie „a,
textbox
kiedycheckbox
jest”checked
), problem ten można rozwiązać tylko przez css . Dzięki takiemu podejściu formularz działa dla użytkowników, którzy wyłączyli JavaScript.Zakładając, że masz następujący kod HTML:
Możesz użyć następującego CSS, aby osiągnąć pożądaną funkcjonalność:
W przypadku innych scenariuszy możesz pomyśleć o odpowiednich selektorach CSS.
Oto skrzypce, aby zademonstrować to podejście .
źródło
Przełącz: 0/1 lub jeszcze
źródło
Myślę, że to będzie proste
źródło