Question Comment vérifier si une case à cocher est cochée dans jQuery?


Je dois vérifier le checked propriété d'une case à cocher et effectuer une action basée sur la propriété checked en utilisant jQuery.

Par exemple, si la case d'âge est cochée, alors je dois afficher une zone de texte pour entrer l'âge, sinon masquer la zone de texte.

Mais le code suivant retourne false par défaut:

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

Comment puis-je interroger avec succès le checked propriété?


3914


origine


Réponses:


Comment puis-je interroger la propriété checked avec succès?

le checked propriété d'une case à cocher DOM élément vous donnera la checked état de l'élément.

Compte tenu de votre code existant, vous pouvez donc le faire:

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

Cependant, il y a une façon beaucoup plus jolie de le faire, en utilisant 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



Utilisez jQuery est() fonction:

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

1549



Utiliser 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

En utilisant la nouvelle méthode de propriété:

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

472



jQuery 1.6+

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

jQuery 1.5 et ci-dessous

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

Toute version de jQuery

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

Tout le crédit va à Xian.


177



J'utilise ceci et cela fonctionne absolument bien:

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

Note: Si la case est cochée, elle retournera vrai sinon indéfini, donc mieux vérifier la valeur "TRUE".


148



Utilisation:

<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



Depuis jQuery 1.6, le comportement de jQuery.attr() a changé et les utilisateurs sont encouragés à ne pas l'utiliser pour récupérer l'état vérifié d'un élément. Au lieu de cela, vous devriez 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")

105



Cela a fonctionné pour moi:

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

isAgeSelected est l'identifiant du contrôle.

En outre, @ Karim79 répondre fonctionne bien. Je ne suis pas sûr de ce que j'ai manqué au moment où je l'ai testé.

Notez que cette réponse utilise Microsoft Ajax, pas jQuery


82



Si vous utilisez une version mise à jour de jquery, vous devez opter pour .prop méthode pour résoudre votre problème:

$('#isAgeSelected').prop('checked') reviendra true si cochée et false si non cochée. Je l'ai confirmé et je suis tombé sur ce problème plus tôt. $('#isAgeSelected').attr('checked') et $('#isAgeSelected').is('checked') est de retour undefined ce qui n'est pas une réponse digne de la situation. Alors faites comme indiqué ci-dessous.

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

J'espère que ça aide:) - Merci.


79



En utilisant le Click gestionnaire d'événements pour la propriété case à cocher n'est pas fiable, car le checked La propriété peut changer pendant l'exécution du gestionnaire d'événement lui-même!

Idéalement, vous voudriez mettre votre code dans un change gestionnaire d'événements tel qu'il est déclenché chaque fois que la valeur de la case à cocher est modifiée (indépendamment de Comment c'est fait ainsi).

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

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

54



J'ai décidé de poster une réponse sur comment faire exactement la même chose sans jQuery. Juste parce que je suis un rebelle.

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;
};

D'abord, vous obtenez les deux éléments par leur ID. Ensuite, vous affectez la case à cocher onchange événement une fonction qui vérifie si la case à cocher a été vérifiée et définit la hidden propriété du champ de texte d'âge de façon appropriée. Dans cet exemple, en utilisant l'opérateur ternaire.

Voici une violon pour vous de le tester.

Addenda

Si la compatibilité entre navigateurs est un problème, je propose de définir le CSS display propriété à aucun et en ligne.

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

Plus lent mais compatible avec plusieurs navigateurs.


49