Cochez la case cochée propriété à l'aide de jQuery

Question

J'ai besoin de vérifier l' checked de la propriété d'une case et d'exécuter une action fondée sur la propriété checked à l'aide de jQuery.

Par exemple, si l'âge de la case est cochée, alors j'ai besoin d'afficher une zone de texte pour entrer dans l'âge, d'autre masquer la zone de texte.

Mais le code suivant renvoie false par défaut:

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

Comment réussir à la requête de l' checked de la propriété?

Answer 1

Il y a un bien plus jolie façon de le faire, à l'aide de toggle:

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

<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>​

Violon Démo

Answer 2

Utilisation de jQuery est() fonction:

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

Answer 3

À l'aide de 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

À l'aide de la nouvelle méthode de propriété:

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

Answer 4

Je suis en utilisant cela et cela fonctionne très bien:

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

Remarque: Si la case est cochée, elle retourne true, sinon pas défini, afin de mieux vérifier la valeur "TRUE".

Answer 5

Depuis jQuery 1.6, Le comportement de l' jQuery.attr() a changé et les utilisateurs sont encouragés à ne pas l'utiliser pour récupérer un élément de l'état activé. Au lieu de cela, vous devez utiliser jQuery.prop():

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

Deux autres possibilités sont:

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