Vérifiez si la case à cocher est cochée avec jQuery

Comment puis-je vérifier si une case à cocher dans un tableau de cases à cocher est vérifiée à l’aide de l’ID du tableau de cases à cocher?

J’utilise le code suivant, mais il renvoie toujours le nombre de cases à cocher cochées, quel que soit l’identifiant.

function isCheckedById(id) { alert(id); var checked = $("input[@id=" + id + "]:checked").length; alert(checked); if (checked == 0) { return false; } else { return true; } } 

Les identifiants doivent être uniques dans votre document, ce qui signifie que vous ne devriez pas faire ceci:

   

Au lieu de cela, supprimez l’ID, puis sélectionnez-les par nom ou par un élément contenant:

 

Et maintenant le jQuery:

 var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0; //there should be no space between identifier and selector // or, without the container: var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0; 
 $('#' + id).is(":checked") 

Cela obtient si la case à cocher est cochée.

Pour un tableau de cases à cocher portant le même nom, vous pouvez obtenir la liste des vérifications en:

 var $boxes = $('input[name=thename]:checked'); 

Ensuite, parcourez-les et voyez ce que vous pouvez faire:

 $boxes.each(function(){ // Do stuff here with this }); 

Pour trouver combien sont vérifiées, vous pouvez faire:

 $boxes.length; 
 $('#checkbox').is(':checked'); 

Le code ci-dessus renvoie true si la case à cocher est cochée ou false si ce n’est pas le cas.

Toutes les méthodes suivantes sont utiles:

 $('#checkbox').is(":checked") $('#checkbox').prop('checked') $('#checkbox')[0].checked $('#checkbox').get(0).checked 

Il est recommandé d’éviter DOMelement ou inline “this.checked” au lieu d’utiliser la méthode jQuery on pour écouter les événements.

Code jQuery pour vérifier si la case est cochée ou non:

 if($('input[name="checkBoxName"]').is(':checked')) { // checked }else { // unchecked } 

Alternativement:

 if($('input[name="checkBoxName"]:checked')) { // checked }else{ // unchecked } 

Le concept le plus important à retenir à propos de l’atsortingbut vérifié est qu’il ne correspond pas à la propriété cochée. L’atsortingbut correspond en fait à la propriété defaultChecked et ne doit être utilisé que pour définir la valeur initiale de la case à cocher. La valeur d’atsortingbut cochée ne change pas avec l’état de la case à cocher, contrairement à la propriété cochée. Par conséquent, la méthode compatible avec plusieurs navigateurs permettant de déterminer si une case à cocher est activée consiste à utiliser la propriété

Toutes les méthodes ci-dessous sont possibles

 elem.checked $(elem).prop("checked") $(elem).is(":checked") 

Vous pouvez utiliser ce code,

 if($("#checkboxId").is(':checked')){ // Code in the case checkbox is checked. } else { // Code in the case checkbox is NOT checked. } 

Vous pouvez essayer ceci:

       

Conformément à la documentation de jQuery , vous pouvez vérifier si une case est cochée ou non. Prenons par exemple une case à cocher (cochez Jsfiddle de travail avec tous les exemples)

  

Exemple 1 – Avec coché

 $("#test-with-checked").on("click", function(){ if(mycheckbox.checked) { alert("Checkbox is checked."); } else { alert("Checkbox is unchecked."); } }); 

Exemple 2 – Avec jQuery est, NOTE -: vérifié

 var check; $("#test-with-is").on("click", function(){ check = $("#mycheckbox").is(":checked"); if(check) { alert("Checkbox is checked."); } else { alert("Checkbox is unchecked."); } }); 

Exemple 3 – Avec un accessoire jQuery

 var check; $("#test-with-prop").on("click", function(){ check = $("#mycheckbox").prop("checked"); if(check) { alert("Checkbox is checked."); } else { alert("Checkbox is unchecked."); } }); 

Vérifiez jsfiddle de travail

Vous pouvez utiliser l’un des codes recommandés suivants par jquery.

 if ( elem.checked ) {}; if ( $( elem ).prop( "checked" ) ) {}; if ( $( elem ).is( ":checked" ) ) {}; 

Vous pouvez le faire simplement comme;

Violon de travail

HTML

  

jQuery

 $(document).ready(function () { var ckbox = $('#checkbox'); $('input').on('click',function () { if (ckbox.is(':checked')) { alert('You have Checked it'); } else { alert('You Un-Checked it'); } }); }); 

ou même plus simple;

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

Si la checkbox est cochée, le résultat sera true sinon undefined

Simple Demo pour vérifier et définir une case à cocher.

jsfiddle !

 $('.attr-value-name').click(function() { if($(this).parent().find('input[type="checkbox"]').is(':checked')) { $(this).parent().find('input[type="checkbox"]').prop('checked', false); } else { $(this).parent().find('input[type="checkbox"]').prop('checked', true); } }); 

Pour la case à cocher avec un identifiant

  

vous pouvez simplement faire

 $("#id_input_checkbox13").prop('checked') 

vous obtiendrez true ou false comme valeur de retour pour la syntaxe ci-dessus. Vous pouvez l’utiliser dans la clause if en tant qu’expression booléenne normale.

Juste pour dire dans mon exemple, la situation était une boîte de dialog qui vérifiait ensuite la case à cocher avant de fermer la boîte de dialog. Aucune de ces réponses et Comment vérifier si une case à cocher est cochée dans jQuery? et jQuery si la case est cochée ne semble pas fonctionner non plus.

À la fin

   var fd=$('.cb#fd').is(':checked'); var rd= $('.cb#rd').is(':checked'); 

Cela fonctionnait donc en appelant la classe puis l’identifiant. plutôt que juste l’ID. Cela peut être dû aux éléments DOM nesteds sur cette page à l’origine du problème. La solution de contournement était ci-dessus.

Quelque chose comme ça peut aider

 togglecheckBoxs = function( objCheckBox ) { var boolAllChecked = true; if( false == objCheckBox.checked ) { $('#checkAll').prop( 'checked',false ); } else { $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) { if( false == chkbox.checked ) { $('#checkAll').prop( 'checked',false ); boolAllChecked = false; } }); if( true == boolAllChecked ) { $('#checkAll').prop( 'checked',true ); } } } 

Activer / désactiver la case à cocher

 $("#checkall").click(function(){ $("input:checkbox").prop( 'checked',$(this).is(":checked") ); }) 

En fait, selon jsperf.com , les opérations DOM sont les plus rapides, puis $ (). Prop () suivi de $ (). Is () !!

Voici les syntaxes:

 var checkbox = $('#'+id); /* OR var checkbox = $("input[name=checkbox1]"); whichever is best */ /* The DOM way - The fastest */ if(checkbox[0].checked == true) alert('Checkbox is checked!!'); /* Using jQuery .prop() - The second fastest */ if(checkbox.prop('checked') == true) alert('Checkbox is checked!!'); /* Using jQuery .is() - The slowest in the lot */ if(checkbox.is(':checked') == true) alert('Checkbox is checked!!'); 

.prop() je préfère .prop() . Contrairement à .is() , il peut également être utilisé pour définir la valeur.

Je sais que les OP veulent des jquery mais dans mon cas, JS pure était la solution, donc si quelqu’un comme moi est ici et n’a pas de jquery ou ne veut pas l’utiliser – voici la réponse de JS:

 document.getElementById("myCheck").checked 

Il renvoie true si l’entrée avec ID myCheck est cochée et false si elle n’est pas cochée.

Aussi simple que cela.

En utilisant ce code, vous pouvez cocher au moins une case à cocher sélectionnée ou non dans différents groupes de cases à cocher ou à partir de plusieurs cases à cocher. En utilisant cela, vous ne pouvez pas avoir besoin de supprimer des identifiants ou des identifiants dynamics. Ce code fonctionne avec les mêmes identifiants.

Lien de référence

   ck1
ck2
ck3
ck4

utiliser le code ci-dessous