Case à cocher et JQUERY : "est coché" toujours FAUX

Question

Le code est ci-dessous et la case à cocher est toujours FALSE. Mais sur la page, c'est différent. Elle n'est pas cochée ou décochée.

<script type="text/javascript">
 $('.cbOzelHastaAdi').unbind('click');

 $('.cbOzelHastaAdi').click( function() {

    var parentDiv = $(this).parent().get(0);
    var cbs = $(parentDiv).find('table input:checkbox');

   if($(this).attr("checked") === "true") {
        cbs.each(function() { $(this).attr('checked', false); });
    }
    else{
        cbs.each(function() { $(this).attr('checked', true); });
    }

})

</script>

Answer 1

L'un des problèmes était que vous aviez le checked sur le span entourant la case à cocher supérieure et l'étiquette, et nous avons lié un gestionnaire d'événements au span, donc checked restera toujours checked sur la travée.

J'ai déplacé les gestionnaires d'événements vers la case à cocher à la place et j'ai mis un peu d'ordre dans le code. Bien que je ne pense pas qu'il y ait un problème à construire vos propres attributs sur des éléments HTML, par exemple un attribut checked sur un élément span (je pense que la validation stricte XHTML échoue avec eux), je ne sais pas si c'est considéré comme une bonne pratique de le faire.

Je vois que vous utilisez ASP.NET, d'après la manipulation des ID - vous pouvez utiliser le côté serveur. <%= myControl.ClientID %> pour obtenir l'identifiant modifié à rendre dans le HTML envoyé au client.

Exemple de travail ici

   $(function() {     
        $('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi').unbind('click');
        $('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi').click( function() {

           var cbs = $('table input:checkbox');  

           if($(this).is(':checked')){
               cbs.each(function() { $(this).attr('checked', true); });
           }
           else{
            cbs.each(function() { $(this).attr('checked', false); });
           }

        });
    });

EDIT :

En réponse à votre commentaire, vous avez plusieurs options pour résoudre le clientid. Si vous écrivez votre jQuery dans la page aspx, alors vous pouvez simplement utiliser

$('#<%= cbOzelKurumHastasi.ClientID %>')

à la place de

$('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi')

Si vous avez votre jQuery dans un fichier script externe, vous pouvez mettre ceci dans votre page aspx

<script type="text/javascript">
var cbOzelKurumHastasi = '#<%= cbOzelKurumHastasi.ClientID %>';
</script>

et ensuite utiliser la variable dans votre fichier script externe

$(function() {     
            $(cbOzelKurumHastasi).unbind('click');
            $(cbOzelKurumHastasi).click( function() { ...

Pour d'autres options, consultez cette question et cette réponse. Comment empêcher ASP.NET de changer les identifiants afin d'utiliser jQuery ?

Answer 2

J'utilise généralement la fonctionnalité .is() de jQuery pour vérifier ce point.

$('.cbOzelHastaAdi').click( function() {
  if($(this).is(':checked')){
    ...
  }else{
    ...
  }
})

Answer 3

Cela pourrait-il être dû au fait que vous comparez la valeur de la propriété vérifiée à une chaîne de caractères plutôt qu'à un booléen et que vous utilisez l'opérateur === qui compare à la fois la valeur et le type ?

Answer 4

J'ai rencontré le même problème : vérifier si une case à cocher est cochée (de toutes les manières possibles) renvoie toujours un résultat faux.

Ma solution (cours du problème) se trouvait dans le sélecteur JQuery utilisé.

uzay95 a utilisé le sélecteur de classe ".", pour sélectionner ses cases à cocher.

$('.cbOzelHastaAdi')**

qui renvoie un ensemble de résultats. Par conséquent, vérifier si elle est cochée n'est pas valable, car il peut y avoir plusieurs cases à cocher... Je sais qu'il utilise le este dans son code, mais pour moi, cela n'a pas non plus résolu le problème.

Dès que vous sélectionnez la case à cocher par ID, vous pouvez évaluer son attribut "checked".

Answer 5

J'ai trouvé que ce qui suit est probablement la meilleure façon de déterminer le statut vérifié dans jQuery :

var cbs = $(parentDiv).find('table input:checkbox:checked');

Cela vous donnera un tableau de chaque entrée qui a été vérifiée.

Cela provient principalement de la documentation de jQuery :

Sélecteurs/Checked