web-dev-qa-db-fra.com

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

Le code est ci-dessous et la case à cocher est toujours FAUX. Mais à la page, c'est différent. Il n'est pas vérifié ou décoché.

<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>
jquerycheckbox
17
uzay95

L'un des problèmes était que vous aviez l'attribut checked sur la plage entourant la case à cocher et l'étiquette supérieures et que vous liez un gestionnaire d'événements à la plage, donc checked restera toujours checked sur la travée.

J'ai plutôt déplacé les gestionnaires d'événements vers la case à cocher et rangé un peu le code. Bien que je ne pense pas qu'il y ait un problème dans la construction de vos propres attributs sur des éléments HTML, c'est-à-dire un attribut vérifié sur un élément span (je pense que la validation stricte XHTML échoue avec eux), je ne sais pas si cela est considéré comme une bonne pratique de le faire.

Je peux voir que vous utilisez ASP.NET, basé sur la modification de l'ID - vous pouvez utiliser le côté serveur <%= myControl.ClientID %> Pour obtenir l'ID déformé à afficher dans le code 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); });
           }

        });
    });

MODIFIER:

En réponse à votre commentaire, vous avez deux options pour résoudre l'ID client. Si vous écrivez votre jQuery dans la page aspx, vous pouvez simplement utiliser

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

au lieu de

$('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi')

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

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

puis utilisez la variable dans votre fichier de script externe

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

Pour d'autres options, jetez un œil à cette question et répondez - Comment empêcher ASP.NET de changer les identifiants afin d'utiliser jQuery

37
Russ Cam

Je nous habituellement la fonctionnalité .is () de jQuery pour vérifier cela

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

serait-ce parce que vous comparez la valeur de la propriété vérifiée à une chaîne plutôt qu'à un booléen et utilisez l'opérateur === qui compare à la fois la valeur et le type?

3
Venr

Je suis tombé sur les mêmes problèmes; vérifier si une case à cocher est cochée (de différentes manières) a toujours renvoyé false.

Ma solution (bien sûr le problème) était dans le sélecteur JQuery qui a été utilisé.

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

$ ('. cbOzelHastaAdi') **

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

Dès que vous cochez la case par ID, vous pouvez évaluer son attribut 'vérifié'.

1
Wouter Mevius

J'ai trouvé que ce qui suit est probablement le meilleur moyen de déterminer l'état 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 des documents jQuery:

Sélecteurs/Vérifié

0
Zhaph - Ben Duguid

Cela fonctionne également:

(($('input[name="myCheckBox"]:checked').val())=='on')

Il renverra soit vrai soit faux

où la case à cocher est définie comme:

<input type="checkbox" name="myCheckBox">
0
user2717833

=== est un comparateur de type sûr pour JS

Voir: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators

0
user259304

La réponse de Russ Cam fonctionne, mais pourquoi ne pas la jQueryify un peu plus?

$(function() {     
    $('.cbOzelHastaAdi').live('click', function() {
        $(this).parents('div').find('table input:checkbox').attr('checked', $(this).attr('checked'));
    });
});

Cela suppose que la classe cbOzelHastaAdi est désormais attachée à la case à cocher au lieu de l'élément span. Cela devrait vous permettre d'éviter tout le désordre ASP renommer et autoriser plusieurs tables similaires par page sans avoir besoin de plusieurs fonctions d'événement de clic.

0
Ben Koehler