Comment vérifier si jQuery est vérifié?

Je dois vérifier la propriété des indicateurs checked et effectuer une action basée sur la propriété vérifiée à l'aide de jQuery.

Par exemple, si la case Âge est cochée, je dois alors afficher une zone de texte pour saisir l’âge, sinon 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écupérer avec succès la propriété checked ?

3928
23 мая '09 в 18:16 2009-05-23 18:16 Prasad est donné le 23 mai 09 à 18:16 2009-05-23 18:16
@ 58 réponses
  • 1
  • 2

Cela a fonctionné pour moi:

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

isAgeSelected est l'ID de contrôle.

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

Note Cette réponse utilise Microsoft Ajax, pas jQuery.

83
24 мая '09 в 8:30 2009-05-24 08:30 la réponse est donnée Prasad le 24 mai 09 à 08h30 2009-05-24 08h30

Comment puis-je exécuter une demande pour une propriété vérifiée?

La propriété checked de l'élément de case à cocher DOM vous donnera l'état checked de l'élément.

En fonction de votre code existant, vous pouvez le faire:

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

Cependant, il y a une façon plus belle de faire cela en utilisant la toggle :

 <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> 
3106
23 мая '09 в 18:20 2009-05-23 18:20 la réponse est donnée par karim79 le 23 mai 09 à 18:20 2009-05-23 18:20

Utilisez la fonction jQuery is () :

 if($("#isAgeSelected").is(':checked')) $("#txtAge").show(); // checked else $("#txtAge").hide(); // unchecked 
1553
22 июня '11 в 13:14 2011-06-22 13:14 la réponse est donnée à Bhanu Krishnan le 22 juin 2011 à 13h14. 2011-06-22 13:14

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 

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

 if($('#checkMeOut').prop('checked')) { // something when checked } else { // something else when not } 
474
23 июня '11 в 20:29 2011-06-23 20:29 la réponse est donnée par SeanDowney le 23 juin '11 à 20:29 2011-06-23 20:29

jQuery 1.6 +

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

jQuery 1.5 et inférieur

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

Toute version de jQuery

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

Tous les prêts sont Xian .

179
20 мая '14 в 23:03 2014-05-20 23:03 la réponse est donnée ungalcrys 20 mai '14 à 23:03 2014-05-20 23:03

Je l'utilise et ça marche absolument bien:

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

Note Si cette case est cochée, la valeur true sera renvoyée, sinon la valeur TRUE est vérifiée.

149
19 авг. La réponse est donnée à Pradeep 19 août. 2010-08-19 16:38 '10 à 16:38 2010-08-19 16:38

Utiliser:

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

 <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 
117
29 авг. la réponse est donnée à Lalji Dhameliya 29 août. 2016-08-29 14:38 '16 à 14:38 2016-08-29 14:38

Depuis jQuery 1.6, le comportement de jQuery.attr() a changé et il est conseillé aux utilisateurs de ne pas l'utiliser pour récupérer l'état marqué par 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 caractéristiques:

 $("#txtAge").get(0).checked $("#txtAge").is(":checked") 
106
27 апр. la réponse est donnée par Salman A 27 avr. 2012-04-27 14:54 '12 à 14:54 2012-04-27 14:54

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

$('#isAgeSelected').prop('checked') renvoie true si coché et false si non défini. Je l'ai confirmé et j'ai rencontré ce problème plus tôt. $('#isAgeSelected').attr('checked') et $('#isAgeSelected').is('checked') renvoie undefined , ce qui n'est pas une bonne réponse à la situation. Faites comme indiqué ci-dessous.

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

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

80
25 авг. réponse donnée par Rajesh Omanakuttan 25 août. 2013-08-25 06:11 13 à 06h11 2013-08-25 06:11

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

Idéalement, vous souhaitez placer votre code dans un gestionnaire d'événements change . Par exemple, il s'exécute chaque fois que la valeur de l'indicateur change (quelle que soit la méthode utilisée).

 $('#isAgeSelected').bind('change', function () { if ($(this).is(':checked')) $("#txtAge").show(); else $("#txtAge").hide(); }); 
55
06 окт. la réponse est donnée à arviman 06 oct. 2011-10-06 04:12 '11 à 4:12 le 2011-10-06 04:12

J'ai décidé de poster une réponse sur la façon de faire 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 affectez un événement onchange case à cocher à une fonction qui vérifie si la case est cochée et définit la propriété hidden du champ de texte d'âge en conséquence. Cet exemple utilise l'opérateur ternaire.

Ici, vous avez un violon à vérifier.

Ajouter

Si la compatibilité entre navigateurs pose problème, je suggère de définir la propriété d' display CSS sur none et inline.

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

Plus lent mais compatible avec tous les navigateurs.

50
20 марта '12 в 22:19 2012-03-20 22:19 la réponse est donnée par Octavian Damiean le 20 mars 12 à 10:19 2012-03-20 22:19

Je pense que vous pourriez faire ceci:

 if ($('#isAgeSelected :checked').size() > 0) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 
40
23 мая '09 в 18:34 2009-05-23 18:34 la réponse est donnée xenon 23 mai '09 à 18:34 2009-05-23 18:34

Il y a plusieurs façons de vérifier si la case à cocher est cochée:

Méthode de validation JQuery

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

Vérifiez un exemple ou un document:

38
14 окт. réponse donnée à Parth Chavda le 14 octobre. 2014-10-14 10:48 14 à 10:48 2014-10-14 10:48

J'ai rencontré le même problème. J'ai vérifié 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 l'indicateur était défini ou non, et il semble que cela fonctionne 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 cela vous aide.

37
16 дек. La réponse est donnée à Nertim le 16 décembre. 2010-12-16 21:50 '10 à 21:50 2010-12-16 21:50

Cela fonctionne pour moi:

  $("#isAgeSelected").click(function(){ $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); }); 
35
06 янв. la réponse est donnée ashish amatya le 06 janvier . 2011-01-06 14:33 '11 à 14:33 2011-01-06 14:33

C'est une autre façon de faire la même chose:

 <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> 
33
24 авг. la réponse est donnée à Sangeet Shah 24 août. 2015-08-24 15:19 '15 à 15h19 2015-08-24 15:19

Ma façon de faire est:

 if ( $("#checkbox:checked").length ) { alert("checkbox is checked"); } else { alert("checkbox is not checked"); } 
30
06 февр. La réponse est donnée à Dalius I 06 février 2012-02-06 17:31 '12 à 17h31 2012-02-06 17:31
 $(document).ready(function() { $('#agecheckbox').click(function() { if($(this).is(":checked")) { $('#agetextbox').show(); } else { $('#agetextbox').hide(); } }); }); 
30
25 нояб. Réponse donnée par Jumper Pot le 25 novembre 2014-11-25 15:25 14 à 15:25 2014-11-25 15:25

Vous pouvez utiliser ce code:

 $('#isAgeSelected').click(function(){ console.log(this.checked); if(this.checked == true) { $("#txtAge").show(); } else { $("#txtAge").hide(); } }); 
30
13 окт. réponse donnée par sandeep kumar le 13 octobre 2016-10-13 09:03 16 à 09h03 2016-10-13 09h03
 $(selector).attr('checked') !== undefined 

Renvoie true si l'entrée est vérifiée et false si ce n'est pas le cas.

30
12 февр. la réponse est donnée fe_lix_ 12 février 2012-02-12 18:15 '12 à 18h15 2012-02-12 18:15

Utilisez ceci:

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

Si coché, la longueur est supérieure à zéro.

29
27 июля '16 в 12:46 2016-07-27 12:46 la réponse est donnée par Hamid NK le 27 juillet 2016 à 12:46. 2016-07-27 12:46

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.

28
28 апр. La réponse est donnée par Muhammad Awais 28 avr. 2016-04-28 15:07 '16 à 15:07 2016-04-28 15:07

Cet exemple est pour le bouton.

Essayez ce qui suit:

 <input type="button" class="check" id="checkall" value="Check All" />  <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); } }); }); 
24
03 янв. la réponse est donnée par usayee le 03 janvier 2014-01-03 13:38 14 à 13:38 2014-01-03 13:38

La réponse principale ne l'a pas fait pour moi. C'est arrivé 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'utilisateur clique sur l'élément # li_13, il vérifie si l'élément # (qui est la case à cocher) est en accord avec la fonction .attr('checked') . S'il s'agit de l'élément fadeIn #saveForm, sinon de l'élément fadeOut saveForm.

23
10 дек. La réponse est donnée à MDMoore313 le 10 décembre. 2012-12-10 08:02 '12 à 8:02 2012-12-10 08:02

1) Si votre balise HTML:

 <input type="checkbox" /> 

attr:

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

Si prop est utilisé:

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

2) Si votre balise HTML:

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

attr:

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

Prop Utilisé:

 $(element).prop("checked") // Will return true whether checked="checked" 
23
30 окт. la réponse est donnée par Somnath Kharat 30 oct. 2013-10-30 15:43 13 à 15:43 2013-10-30 15:43

Commutateur: 0/1 ou plus

 <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'); }; }); 
21
08 янв. réponse donnée par l' utilisateur2385302 Jan 08 2015-01-08 16:10 '15 à 16:10 2015-01-08 16:10

J'utilise ceci:

  <input type="checkbox" id="isAgeSelected" value="1" /> <br/> <input type="textbox" id="txtAge" /> $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); 
19
06 сент. La réponse est donnée par Nishant Kumar Sep 06 2013-09-06 09:43 '13 à 9:43 2013-09-06 09:43

Bien que vous ayez proposé une solution JavaScript pour votre problème (la textbox affichée lorsque la checkbox est checked ), ce problème ne peut être résolu qu'avec l'aide de css . Avec cette approche, votre formulaire fonctionne pour les utilisateurs qui ont désactivé JavaScript.

En supposant que vous ayez le code 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;} 

Dans d'autres scénarios, vous pouvez penser aux sélecteurs CSS appropriés.

Voici un script démontrant cette approche .

19
22 авг. La réponse est donnée par Ormoz le 22 août. 2015-08-22 22:09 '15 à 22h09 2015-08-22 22:09
 if($("#checkkBoxId").is(':checked')){ alert("Checked=true"); } 

ou

 if($("#checkkBoxId").attr('checked') == true){ alert("checked=true"); } 
16
10 июня '13 в 16:12 2013-06-10 16:12 la réponse est donnée par ijarlax le 10 juin '13 à 16:12 2013-06-10 16:12

Je suis sûr que ce n'est pas une sorte de révélation, mais je n'ai pas vu tout cela dans un exemple:

Sélecteur pour toutes les cases cochées (sur la page):

 $('input[type=checkbox]:checked') 
15
15 нояб. La réponse est donnée à Tsonev le 15 nov. 2013-11-15 13:50 13 à 13:50 2013-11-15 13:50
  • 1
  • 2

Autres questions sur les balises ou Poser une question