Frage Wie überprüfe ich, ob ein Kontrollkästchen in jQuery aktiviert ist?


Ich muss das überprüfen checked Eigenschaft eines Kontrollkästchens und führen Sie eine Aktion basierend auf der checked-Eigenschaft mit jQuery aus.

Wenn beispielsweise das Kontrollkästchen "Alter" aktiviert ist, muss ein Textfeld zum Eingeben des Alters angezeigt werden, andernfalls muss das Textfeld ausgeblendet werden.

Aber der folgende Code gibt zurück false standardmäßig:

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

Wie kann ich das erfolgreich abfragen? checked Eigentum?


3914


Ursprung


Antworten:


Wie kann ich die geprüfte Eigenschaft erfolgreich abfragen?

Das checked Eigenschaft eines Checkbox-DOM-Elements gibt Ihnen die checked Zustand des Elements.

Wenn Sie Ihren vorhandenen Code verwenden, können Sie dies folgendermaßen tun:

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

Es gibt jedoch einen viel schöneren Weg, dies zu tun 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



Verwenden Sie jQuery's ist () Funktion:

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

1549



Verwenden von 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

Verwenden der neuen Eigenschaftsmethode:

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

472



jQuery 1.6+

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

jQuery 1.5 und niedriger

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

Jede Version von jQuery

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

Der ganze Kredit geht an Xian.


177



Ich benutze dies und das funktioniert absolut gut:

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

Hinweis: Wenn das Kontrollkästchen aktiviert ist, wird True zurückgegeben, andernfalls undefined. Überprüfen Sie daher den Wert "TRUE".


148



Benutzen:

<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



Seit jQuery 1.6, das Verhalten von jQuery.attr() hat sich geändert und Benutzer werden ermutigt, sie nicht zum Abrufen des aktivierten Status eines Elements zu verwenden. Stattdessen sollten Sie verwenden jQuery.prop():

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

Zwei weitere Möglichkeiten sind:

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

105



Das hat für mich funktioniert:

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

Woher isAgeSelected ist die ID der Kontrolle.

Auch, @ Karim79's Antworten funktioniert gut. Ich bin mir nicht sicher, was ich zu dem Zeitpunkt verpasst habe, als ich es getestet habe.

Hinweis: Diese Antwort verwendet Microsoft Ajax, nicht jQuery


82



Wenn Sie eine aktualisierte Version von jQuery verwenden, müssen Sie gehen .prop Methode, um dein Problem zu lösen:

$('#isAgeSelected').prop('checked') wird zurückkehren true wenn aktiviert und false wenn nicht markiert. Ich habe es bestätigt und bin schon früher auf dieses Problem gestoßen. $('#isAgeSelected').attr('checked') und $('#isAgeSelected').is('checked') kommt zurück undefined Das ist keine würdige Antwort für die Situation. Also tun Sie wie unten angegeben.

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

Hoffe es hilft:) - Danke.


79



Verwendung der Click Ereignishandler für die Checkbox-Eigenschaft ist unzuverlässig, wie die checked Eigenschaft kann sich während der Ausführung des Event-Handlers selbst ändern!

Im Idealfall möchten Sie Ihren Code in ein change Ereignishandler, wie er jedes Mal ausgelöst wird, wenn der Wert des Kontrollkästchens geändert wird (unabhängig von Wie es ist so gemacht).

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

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

54