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

Comment puis-je consulter avec succès la propriété contrôlée?

La propriété checked d'un élément DOM de la case à cocher vous donnera l'état checked 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 existe une façon beaucoup plus jolie de le faire, en utilisant le 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> 

Utilisez la fonction jQuery's () :

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

Utilisation 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 

Utilisation de la nouvelle méthode de propriété:

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

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 est versé à Xian .

Je l'utilise et ça fonctionne parfaitement:

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

Remarque: Si la case à cocher est cochée, elle renverra true sinon définie, afin de mieux vérifier la valeur "TRUE".

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 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") 

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

$('#isAgeSelected').prop('checked') renverra true s'il est vérifié et false si non vérifié. Je l'ai confirmé et j'ai rencontré ce problème plus tôt. $('#isAgeSelected').attr('checked') et $('#isAgeSelected').is('checked') renvoie undefined qui n'est pas une réponse valable pour la situation. Donc, faites comme indiqué ci-dessous.

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

J'espère que cela vous aidera:) – Merci.

Cela a fonctionné pour moi:

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

Where isAgeSelected est l'identifiant du contrôle.

De plus, la réponse de @ karim79 fonctionne bien. Je ne suis pas sûr de ce que j'ai manqué au moment où je l'ai testé.

Notez que c'est une réponse qui utilise Microsoft Ajax, pas jQuery

Utilisation:

 <input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned $("#planned_checked").change(function() { if($(this).prop('checked') == true) { alert("Checked Box Selected"); } else { alert("Checked Box deselect"); } }); 

  $("#planned_checked").change(function() { if($(this).prop('checked') == true) { 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 

L'utilisation du gestionnaire d'événements Click pour la propriété checkbox n'est pas fiable, car la propriété checked peut changer lors de l'exécution du gestionnaire d'événements lui-même!

Idéalement, vous souhaitez mettre votre code dans un gestionnaire d'événements de change tel qu'il est déclenché chaque fois que la valeur de la case à cocher est modifiée (indépendamment de la manière dont elle est effectuée).

 $('#isAgeSelected').bind('change', function () { if ($(this).is(':checked')) $("#txtAge").show(); else $("#txtAge").hide(); }); 

J'ai décidé de publier une réponse sur la façon de 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 identifiant. Ensuite, vous attribuez l'événement onchange la case à cocher une fonction qui vérifie si la case à cocher a été vérifiée et définit la propriété hidden du champ de texte d'âge de manière appropriée. Dans cet exemple, utilisez l'opérateur ternaire.

Voici un violon pour que vous puissiez le tester.

Addenda

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

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

Compatible avec un navigateur plus lent mais compatible avec le navigateur.

Je crois que vous pourriez faire ceci:

 if ($('#isAgeSelected :checked').size() > 0) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 

J'ai couru exactement le même problème. J'ai une case à cocher ASP.NET

 <asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" /> 

Dans le code jQuery, j'ai utilisé le sélecteur suivant pour vérifier si la case à cocher a été vérifiée ou non, et cela semble fonctionner comme un charme.

 if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked')) { ... } else { ... } 

Je suis sûr que vous pouvez également utiliser l'ID au lieu de CssClass,

 if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked')) { ... } else { ... } 

J'espère que ceci vous aide.

 $(selector).attr('checked') !== undefined 

Cela renvoie true si l'entrée est cochée et false s'il ne l'est pas.

 $(document).ready(function() { $('#agecheckbox').click(function() { if($(this).is(":checked")) { $('#agetextbox').show(); } else { $('#agetextbox').hide(); } }); }); 

Ma façon de le faire est:

 if ( $("#checkbox:checked").length ) { alert("checkbox is checked"); } else { alert("checkbox is not checked"); } 

Cela fonctionne pour moi:

 /* isAgeSelected being id for checkbox */ $("#isAgeSelected").click(function(){ $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); }); 

Il existe plusieurs façons de vérifier si une case est cochée ou pas:

Mode de vérification à l'aide de jQuery

 if (elem.checked) if ($(elem).prop("checked")) if ($(elem).is(":checked")) if ($(elem).attr('checked')) 

Vérifiez l'exemple ou le document:

• http://api.jquery.com/attr/

• http://api.jquery.com/prop/

Vous pouvez utiliser ce code:

 $('#isAgeSelected').click(function(){ console.log(this.checked); if(this.checked == true) { $("#txtAge").show(); } else { $("#txtAge").hide(); } }); 

Vous pouvez utiliser:

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

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

Les deux devraient fonctionner.

Basculer: 0/1 ou bien

 <input type="checkbox" id="nolunch" /> <input id="checklunch />" $('#nolunch').change(function () { if ($(this).is(':checked')) { $('#checklunch').val('1'); }; if ($(this).is(':checked') == false) { $('#checklunch').val('0'); }; }); 

1) Si votre balisage HTML est:

 <input type="checkbox" /> 

Attr utilisé:

 $(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set 

Si le support est utilisé:

 $(element).prop("checked"); // Will give you false whether or not initial value is set 

2) Si votre balisage HTML est:

  <input type="checkbox" checked="checked" />// May be like this also checked="true" 

Attr utilisé:

 $(element).attr("checked") // Will return checked whether it is checked="true" 

Prop utilisé:

 $(element).prop("checked") // Will return true whether checked="checked" 

La meilleure réponse ne m'a pas été faite pour moi. Cela a fait cependant:

 <script type="text/javascript"> $(document).ready(function(){ $("#li_13").click(function(){ if($("#agree").attr('checked')){ $("#saveForm").fadeIn(); } else { $("#saveForm").fadeOut(); } }); }); </script> 

Fondamentalement, lorsque l'élément # li_13 est cliqué, il vérifie si l'élément # accepte (c'est la case à cocher) est coché en utilisant la fonction .attr('checked') . Si c'est alors fadeIn l'élément #saveForm, et si non fadeOut l'élément saveForm.

C'est une méthode différente pour faire la même chose:

 $(document).ready(function (){ $('#isAgeSelected').click(function() { // $("#txtAge").toggle(this.checked); // Using a pure CSS selector if ($(this.checked)) { alert('on check 1'); }; // Using jQuery's is() method if ($(this).is(':checked')) { alert('on checked 2'); }; // // Using jQuery's filter() method if ($(this).filter(':checked')) { alert('on checked 3'); }; }); }); 

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <input type="checkbox" id="isAgeSelected"/> <div id="txtAge" style="display:none">Age is something</div> 

Cet exemple est pour un bouton.

Essayez ce qui suit:

 <input type="button" class="check" id="checkall" value="Check All" /> &nbsp; <input type="button" id="remove" value="Delete" /> <br/> <input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/> <input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/> <input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/> $('#remove').attr('disabled', 'disabled'); $(document).ready(function() { $('.cb-element').click(function() { if($(this).prop('checked')) { $('#remove').attr('disabled', false); } else { $('#remove').attr('disabled', true); } }); $('.check:button').click(function() { var checked = !$(this).data('checked'); $('input:checkbox').prop('checked', checked); $(this).data('checked', checked); if(checked == true) { $(this).val('Uncheck All'); $('#remove').attr('disabled', false); } else if(checked == false) { $(this).val('Check All'); $('#remove').attr('disabled', true); } }); }); 

Utilisez ceci:

 if ($('input[name="salary_in.Basic"]:checked').length > 0) 

La longueur est supérieure à zéro si la case à cocher est cochée.

 if($("#checkkBoxId").is(':checked')){ alert("Checked=true"); } 

ou

 if($("#checkkBoxId").attr('checked') == true){ alert("checked=true"); } 

Bien que vous ayez proposé une solution JavaScript pour votre problème (afficher une textbox lorsqu'une checkbox est checked ), ce problème pourrait être résolu uniquement par css . Avec cette approche, votre formulaire fonctionne pour les utilisateurs ayant désactivé JavaScript.

En supposant que vous avez le HTML suivant:

 <label for="show_textbox">Show Textbox</label> <input id="show_textbox" type="checkbox" /> <input type="text" /> 

Vous pouvez utiliser le CSS suivant pour obtenir la fonctionnalité souhaitée:

  #show_textbox:not(:checked) + input[type=text] {display:none;} 

Pour d'autres scénarios, vous pouvez penser à des sélecteurs CSS appropriés.

Voici un violon pour démontrer cette approche .

Je pense que ce sera le simple

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

J'ai vérifié dans Firefox 9.0.1 que les travaux suivants pour récupérer l'état d'une boîte à cocher modifient:

 $("#mycheckbox").change(function() { var value = $(this).prop("checked") ? 'true' : 'false'; alert(value); });