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

4548

Muszę sprawdzić checkedwł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 falsedomyś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ć checkedwłaściwość?

Prasad
źródło
14
$ ('# isAgeSelected') zwraca kolekcję, zamień ją na: $ ('# isAgeSelected') [0] .checked
zamoldar
14
dlaczego nie$('#isAgeSelected').checked
Don Cheadle
1
Pełną
12
Ponieważ selektory jQuery zwracają tablicę, możesz użyć$('#isAgeSelected')[0].checked
Felipe Leão
2
dla mnie zadziałało następujące ulepszenie: zamień .attr ('zaznaczone') na .is (': zaznaczone')
Mark N Hopgood

Odpowiedzi:

3432

Jak pomyślnie wyszukać sprawdzoną właściwość?

checkedWłaściwość elementu checkbox DOM daje checkedstan elementu.

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

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

Jest jednak o wiele ładniejszy sposób, 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>

karim79
źródło
36
próbowałem również powyższego warunku, ale zwraca tylko fałsz
Prasad
24
$ ("# txtAge"). przełącz (this.checked); Robi dokładnie to samo co $ („# 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 będzie działać zgodnie z oczekiwaniami.
Maksim Vi.
23
@Chiramisu - Gdybyś przeczytał odpowiedź do końca, zauważyłbyś, że moja edycja nie korzysta z is(':checked')firmy.
karim79
8
ustawić: $ („# chkmyElement”) [0] .checked = true; uzyskać: if ($ („# chkmyElement”) [0] .checked)
JJ_Coder4Wybierz
28
To nie jest odpowiedź na pytanie. this.checkednie 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.
Marc Compte,
1846

Użyj funkcji is () jQuery :

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
Bhanu Krishnan
źródło
19
Jeśli nie musisz, czas trwania itd łagodne, można użyć $("#txtAge").toggle($("#isAgeSelected").is(':checked'))
Naor
13
+1 są różne sposoby uzyskania sprawdzonej nieruchomości. Niektóre są wymienione tutaj
3199690
@NickG Właściwie jQuery nie mają : visible selektora
hvdd
2
@hvdd Wiem - powiedziałem „właściwość”, a nie selektor.
NickG
@NickG ... Nie rozumiem, co masz na myśli. jQuery nie ma .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.
xDaizu
566

Korzystanie z 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

Za pomocą nowej metody właściwości:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}
SeanDowney
źródło
27
Chciałbym wiedzieć, dlaczego nie jest to odpowiedź ... jeśli w ogóle używasz jquery, .propmetoda 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?
dsdsdsdsd,
1
@dsdsdsdsd prawdopodobnie dlatego, że wymaga jeszcze jednego kroku kompatybilności wstecznej (mam teraz ten sam problem).
user98085
18
.is(":checked")i .prop("checked")oba są poprawnymi sposobami uzyskania tego samego wyniku w jQuery, .isbędą działać we wszystkich wersjach, .propwymaga wersji
1.6+
Jeśli używasz .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 jest this.checked.
vapcguy
230

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)

Cały kredyt należy do Xian .

ungalcrys
źródło
8
Technicznie this.checkedużywa prostego Javascript. Ale uwielbiam tę odpowiedź między wersjami jQuery!
vapcguy
170

Korzystam z tego i działa absolutnie dobrze:

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

Uwaga: Jeśli pole wyboru jest zaznaczone, zwróci true w przeciwnym razie niezdefiniowany, więc lepiej sprawdź wartość „PRAWDA”.

Pradeep
źródło
6
Działa to, ponieważ $ („# checkkBoxId”). Attr („zaznaczony”) zwraca „zaznaczony” lub „” (pusty ciąg znaków). A pusty ciąg jest fałszem, niepusty ciąg jest prawdą, zobacz o wartościach prawda
Adrien Be
7
Do jquery 2.1.x zwraca zawsze sprawdzane, czy jest domyślnie sprawdzane ... Nie wiem, czy to zachowanie jest zamierzone, ale na pewno nie działa (myślę, że to błąd) ... Val () też nie działa, pozostaje „włączony”. Prop () działa poprawnie, a dom.checked działa albo.
inf3rno
1
Problem pojawia się, gdy trzeba obsługiwać starsze przeglądarki .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.checkedrozwiązania cross-jQuery, ponieważ jest to po prostu Javascript.
vapcguy
.attr („zaznaczone”) sprawdzi, czy jest domyślnie zaznaczone, tak. Ponieważ sprawdza atrybut html , a nie bieżący stan. Poprzednia wersja była błędem (choć chyba dużo ją wykorzystano).
Jay Irvine
149

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

Lalji Dhameliya
źródło
119

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():

$("#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")
Salman A.
źródło
i $ („# txtAge”) [0]. sprawdzone
Jewgienij
101

To działało dla mnie:

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

Gdzie isAgeSelectedjest 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

Prasad
źródło
4
We wszystkich przypadkach, we wszystkich normalnych językach programowania, możesz pominąć== true
RedPixel 14.04.19
@RedPixel Chyba że masz do czynienia z typami zerowalnymi. :) (pedantyczna buźka)
Kanion Kolob
88

Jeśli używasz zaktualizowanej wersji jquery, musisz wybrać .propmetodę rozwiązania problemu:

$('#isAgeSelected').prop('checked')zwróci, truejeśli zaznaczone, a falsejeśli niezaznaczone. Potwierdziłem to i natknąłem się na ten problem wcześniej. $('#isAgeSelected').attr('checked')i $('#isAgeSelected').is('checked')powraca, undefinedco nie jest godną odpowiedzią na sytuację. Zrób tak, jak podano poniżej.

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

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

Rajesh Omanakuttan
źródło
dlaczego nie $('#isAgeSelected').checked?
Don Cheadle
1
aby korzystać z. czy potrzebujesz dwukropka $ ('# isAgeSelected'). is (': zaznaczono')
Patrick
62

Korzystanie z Clickprocedury obsługi zdarzeń dla właściwości checkbox jest zawodne, ponieważ checkedwłaściwość może się zmieniać podczas wykonywania samej procedury obsługi zdarzeń!

Idealnie byłoby, gdybyś chciał umieścić swój kod w changemodule obsługi zdarzeń, takim jak uruchamiany za każdym razem, gdy zmienia się wartość pola wyboru (niezależnie od tego , jak to się robi).

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

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
arviman
źródło
3
Począwszy od jQuery 1.7, .on()metoda jest preferowaną metodą dołączania procedur obsługi zdarzeń do dokumentu.
naor
61

Posługiwać się:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

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.

UDB
źródło
53

Postanowiłem opublikować odpowiedź, jak zrobić dokładnie to samo bez jQuery. Tylko dlatego, że jestem buntownikiem.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

Najpierw dostajesz oba elementy według ich identyfikatora. Następnie przypisujesz onchangezdarzenie pola wyboru funkcję, która sprawdza, czy pole wyboru zostało zaznaczone, i odpowiednio ustawia hiddenwł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ć displaywłaściwość CSS na none i inline .

elem.style.display = this.checked ? 'inline' : 'none';

Wolniejszy, ale kompatybilny z różnymi przeglądarkami.

Oktawian A. Damiean
źródło
Cóż, .hiddennie jest bardzo przeglądarkowy, chociaż podoba mi się to rozwiązanie :)
Florian Margaine
To jest rzeczywiście najlepszy sposób użycia style. To niefortunne, ponieważ .hiddenwydajność jest znacznie lepsza .
Florian Margaine
Przypisanie wewnątrz operatora warunkowego? Prawnie tak. Jednak nie to, co nazwałbym dobrym stylem.
Jules
można uprościć: ageInput.hidden =! to. sprawdzone; (Nienawidzę, gdy ludzie niepotrzebnie używają literałów boolowskich ... jeśli używasz zarówno „prawda”, jak i „fałsz” w tym samym prostym stwierdzeniu, prawdopodobnie nie jest konieczne używanie żadnego z nich)
JoelFan
52

Wierzę, że możesz to zrobić:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
ksenon
źródło
alert ($ ('input [name = isAgeSelected]'). attr ('zaznaczone')); Powyższy kod pokazuje prawda / fałsz na podstawie sprawdzenia. Jakikolwiek problem z poprzednimi próbami
Prasad
Prasad, czy odwołujesz się do pola wyboru według nazwy lub identyfikatora? Jestem teraz zmieszany ...
karim79
Nie możesz podać tego dokumentu? Sprawa byłaby o wiele łatwiejsza. W twoim przykładzie adresujesz ją za pomocą jej identyfikatora
ksenon
Metoda .size () jest przestarzała od wersji jQuery 1.8. Zamiast tego użyj właściwości .length (with no () ;-)! A może trzeba trzymać się razem „#isAgeSelected: zaznaczono”.
François Breton
47

Natrafiłem na dokładnie ten sam problem. Mam pole wyboru ASP.NET

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

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.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Jestem pewien, że możesz także użyć identyfikatora zamiast CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Mam nadzieję, że to Ci pomoże.

Nertim
źródło
46

Istnieje wiele sposobów sprawdzenia, czy pole wyboru jest zaznaczone, czy nie:

Sposób sprawdzenia za pomocą jQuery

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Sprawdź przykład lub dokument:

Parth Chavda
źródło
46

Ten kod ci pomoże

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
sandeep kumar
źródło
42

To działa dla mnie:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
ashish amatya
źródło
41

To jest inna metoda na zrobienie tego samego:

$(document).ready(function (){

    $('#isAgeSelected').click(function() {
        // $("#txtAge").toggle(this.checked);

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Sangeet Shah
źródło
35

Użyj tego:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

Długość jest większa od zera, jeśli pole wyboru jest zaznaczone.

Hamid NK
źródło
33

Mój sposób na zrobienie tego to:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
Dalius I.
źródło
31
$(selector).attr('checked') !== undefined

Zwraca się, truejeśli dane wejściowe są zaznaczone, a falsejeśli nie są.

fe_lix_
źródło
4
Rozumiem, dlaczego może to działać w niektórych scenariuszach, chociaż ma ten sam problem, co .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ć undefinedjako var undefined = 'checked';.
WynandB
.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.
fe_lix_
Na marginesie, sprawdzanie niezdefiniowanych jest lepsze przytypeof (x) !== "undefined"
naor
W takim przypadku uważam, że jest dokładniejszy i łatwiejszy do odczytania dzięki! ==. Używałbym typeof (x) tylko podczas testowania zmiennej, która mogła zostać zdefiniowana lub nie w przeszłości.
fe_lix_
30
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
Jumper Pot
źródło
30

Możesz użyć:

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

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

Oba powinny działać.

Muhammad Awais
źródło
27

1) Jeśli Twój znacznik HTML to:

<input type="checkbox"  />

zastosowane attr:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Jeśli zastosowano rekwizyt:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Jeśli Twój znacznik HTML to:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

zastosowane attr:

$(element).attr("checked") // Will return checked whether it is checked="true"

Zastosowana prop:

$(element).prop("checked") // Will return true whether checked="checked"
Somnath Kharat
źródło
To jest PRAWDZIWY problem. Moje obejście - dodaj zdarzenie zmiany do danych wejściowych: <input type = "checkbox" onchange = "ChangeChkBox ()" /> następnie użyj tego zdarzenia, aby zmienić boolowską zmienną JavaScript i użyj zmiennej JavaScript zamiast bezpośrednio pytać o pole wyboru.
Graham Laight,
24

Ten przykład dotyczy przycisku.

Spróbuj wykonać następujące czynności:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});
usayee
źródło
24

Najlepsza odpowiedź nie zrobiła tego dla mnie. Tak było jednak:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

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.

BigHomie
źródło
22

Używam tego:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
Nishant
źródło
22

Chociaż zaproponowałeś rozwiązanie JavaScript dla swojego problemu (wyświetlanie „a, textboxkiedy checkboxjest” 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:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

Możesz użyć następującego CSS, aby osiągnąć pożądaną funkcjonalność:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

W przypadku innych scenariuszy możesz pomyśleć o odpowiednich selektorach CSS.

Oto skrzypce, aby zademonstrować to podejście .

Ormoz
źródło
21

Przełącz: 0/1 lub jeszcze

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});
2385302
źródło
19

Myślę, że to będzie proste

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
Jitendra Damor
źródło