Domanda Come verificare se una casella di controllo è selezionata in jQuery?


Devo controllare il checked proprietà di una casella di controllo ed eseguire un'azione basata sulla proprietà controllata usando jQuery.

Ad esempio, se la casella di controllo dell'età è selezionata, allora devo mostrare una casella di testo per inserire l'età, altrimenti nascondere la casella di testo.

Ma il seguente codice restituisce false di default:

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

Come posso interrogare con successo il checked proprietà?


3914


origine


risposte:


Come faccio a interrogare correttamente la proprietà selezionata?

Il checked proprietà di un elemento DOM checkbox ti darà il checked stato dell'elemento.

Dato il tuo codice esistente, potresti quindi fare questo:

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

Tuttavia, c'è un modo molto più carino per farlo, usando 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



Usa jQuery è()  funzione:

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

1549



Usando 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

Utilizzando il nuovo metodo di proprietà:

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

472



jQuery 1.6+

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

jQuery 1.5 e sotto

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

Qualsiasi versione di jQuery

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

Tutto il merito va a Xian .


177



Sto usando questo e questo funziona perfettamente bene:

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

Nota: se la casella è selezionata, restituirà true altrimenti non definito, quindi è meglio controllare il valore "TRUE".


148



Uso:

<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


113



Dal jQuery 1.6, il comportamento di jQuery.attr() è cambiato e gli utenti sono incoraggiati a non usarlo per recuperare lo stato controllato di un elemento. Invece, dovresti usare jQuery.prop():

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

Altre due possibilità sono:

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

105



Questo ha funzionato per me:

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

Dove isAgeSelected è l'id del controllo.

Inoltre, @ karim79's risposta  funziona bene. Non sono sicuro di ciò che ho perso nel momento in cui l'ho testato.

Nota, questa è la risposta utilizza Microsoft Ajax, non jQuery


82