Vraag Hoe controleer ik of een selectievakje is aangevinkt in jQuery?


Ik moet de checked eigenschap van een selectievakje en voer een actie uit op basis van de gecontroleerde eigenschap met jQuery.

Als het vakje voor de leeftijd bijvoorbeeld is aangevinkt, moet ik een tekstvak weergeven om de leeftijd in te voeren, anders moet ik het tekstvak verbergen.

Maar de volgende code retourneert false standaard:

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

Hoe kan ik met succes de checked eigendom?


3914


oorsprong


antwoorden:


Hoe kan ik met succes de gecontroleerde eigenschap opvragen?

De checked eigenschap van een selectievakje DOM-element geeft u de checked staat van het element.

Gezien uw bestaande code, zou u daarom dit kunnen doen:

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

Er is echter een veel mooiere manier om dit te doen, met behulp van 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>


3099



Gebruik jQuery's is () functie:

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

1549



JQuery gebruiken> 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

De nieuwe eigenschapen methode gebruiken:

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

472



jQuery 1.6+

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

jQuery 1.5 en lager

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

Elke versie van jQuery

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

Alle eer gaat naar Xian.


177



Ik gebruik dit en dit werkt absoluut prima:

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

Opmerking: als het selectievakje is ingeschakeld, wordt true geretourneerd, anders ongedefinieerd, dus controleer beter op de "TRUE" -waarde.


148



Gebruik:

<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


114



Sinds jQuery 1.6 is het gedrag van jQuery.attr() is gewijzigd en gebruikers worden aangemoedigd om het niet te gebruiken om de gecontroleerde status van een element op te halen. In plaats daarvan zou je moeten gebruiken jQuery.prop():

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

Twee andere mogelijkheden zijn:

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

105



Dit werkte voor mij:

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

Waar isAgeSelected is het ID van het besturingselement.

Ook @ Karim79's antwoord werkt prima. Ik weet niet zeker wat ik heb gemist toen ik het testte.

Let op, dit is antwoord maakt gebruik van Microsoft Ajax, niet jQuery


82



Als u een bijgewerkte versie van jQuery gebruikt, moet u gaan voor .prop methode om uw probleem op te lossen:

$('#isAgeSelected').prop('checked') zal terugkeren true indien aangevinkt en false indien niet aangevinkt. Ik heb het bevestigd en ik ben eerder met dit probleem geconfronteerd. $('#isAgeSelected').attr('checked') en $('#isAgeSelected').is('checked') komt terug undefined wat geen waardig antwoord is voor de situatie. Doe dus zoals hieronder aangegeven.

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

Ik hoop dat het helpt:) - Bedankt.


79



De ... gebruiken Click gebeurtenishandler voor de eigenschap checkbox is onbetrouwbaar, zoals de checked eigenschap kan veranderen tijdens de uitvoering van de gebeurtenishandler zelf!

In het ideale geval wilt u uw code in een change gebeurtenishandler, zoals deze wordt elke keer dat de waarde van het selectievakje wordt gewijzigd, geactiveerd (onafhankelijk van hoe het is zo gedaan).

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

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

54