Vérifier si un checkbox est cochée en jQuery

J’ai besoin de vérifier la propriété checked d’un checkbox et d’effectuer une action basée sur la propriété checked en utilisant jQuery.

Par exemple, si le checkbox de Téléphone est cochée, je dois afficher une zone de texte pour saisir le numéro de téléphone, puis masquer la zone de texte.

Mais le code suivant renvoie false par défaut :

<input type="checkbox" id="isPhoneSelected"/>
<div id="txtPhone" style="display:none">
  Téléphone est sélectionné
</div>
if ($('#isPhoneSelected').attr('checked')) {
  $("#txtPhone").show();
} else {
  $("#txtPhone").hide();
}

La propriété checked de l’élément DOM checkbox vous donnera l’état de l’élément si il est coché ou non. Mais il existe une autre façon de le faire, en utilisant la fonction Toggle:

$('#isPhoneSelected').click(function() {
    $("#txtPhone").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isPhoneSelected"/>
<div id="txtPhone" style="display:none">Téléphone est sélectionné</div>

Vous pouvez voir le résultat du code ci-dessus en cliquant sur « Run Pen »

Utilisez la fonction is() de jQuery :

if($("#isPhoneSelected").is(':checked'))
    $("#txtPhone").show();  // coché
else
    $("#txtPhone").hide();  // non coché

J’utilise ceci et cela fonctionne parfaitement :

$("#isPhoneSelected").attr("checked") ? alert("Coché") : alert("Non coché");

Essayez le code suivant:

<input type="checkbox" id="isPhoneSelected" checked> Téléphone est sélectionné

$("#isPhoneSelected").change(function() {
    if($(this).prop('checked')) {
        alert("Coché");
    } else {
        alert("Non coché");
    }
});

Voir aussi le tutoriel suivant: