web-dev-qa-db-fra.com

L'événement de bascule Jquery joue avec la valeur de la case à cocher

J'utilise l'événement bascule de Jquery pour faire des choses lorsqu'un utilisateur clique sur une case à cocher, comme ceci:

$('input#myId').toggle(
function(){
//do stuff  
},
function(){
//do other stuff    
}
);

Le problème est que la case n'est pas cochée lorsque je clique dessus. (Tout ce que j'ai mis dans l'événement bascule fonctionne correctement.)

J'ai essayé ce qui suit:

$('input#myId').attr('checked', 'checked');

et

$(this).attr('checked', 'checked');

et même simplement

return true;

Mais rien ne fonctionne. Quelqu'un peut-il me dire où je me trompe?

Modifier - merci à tous ceux qui ont répondu. La réponse de Dreas a très bien fonctionné pour moi, à l'exception de la partie qui a vérifié l'attribut. Cela fonctionne parfaitement (même si c'est un peu hacky)

$('input#myInput').change(function ()
{
    if(!$(this).hasClass("checked"))
    {
        //do stuff if the checkbox isn't checked
        $(this).addClass("checked");
        return;
    }

    //do stuff if the checkbox isn't checked
    $(this).removeClass('checked');
});

Merci encore à tous ceux qui ont répondu.

jqueryforms
42
John McCollum

Utilisez l'événement change au lieu de l'événement toggle, comme par exemple:

$('input#myId').change(function () {
    if ($(this).attr("checked")) {
        //do the stuff that you would do when 'checked'

        return;
    }
    //Here do the stuff you want to do when 'unchecked'
});
52
Andreas Grech

Bien que l'utilisation du gestionnaire d'événements change suggéré par Dreas Grech soit appropriée, cela ne fonctionne pas bien dans IE 6 & 7, qui ne déclenche pas le change jusqu'à ce que le focus soit flou (c'est-à-dire jusqu'à ce que vous cliquiez en dehors de la zone de la case à cocher). Comme QuirksMode dites, "c'est un bug sérieux".

Vous souhaiterez peut-être utiliser le gestionnaire d'événements click, mais cela ne fonctionnera pas avec la navigation au clavier. Vous devez également enregistrer un gestionnaire keyup ...

Voir aussi cette question connexe .

Je n'ai pas encore trouvé une bonne solution multi-navigateur qui prend en charge les clics de souris et l'activation du clavier des cases à cocher (et ne déclenche pas trop d'événements).

Concernant votre solution pour vérifier si la case est cochée ou non, au lieu d'ajouter votre propre classe checked, vous pouvez utiliser l'attribut HTML checked:

$('input#myInput').change(function () {
    if ($(this).attr("checked")) {
        //do stuff if the checkbox is checked
    } else {
        //do stuff if the checkbox isn't checked
    }
});

Tout navigateur définit l'attribut checked d'un élément input sur la valeur "checked" si la case est cochée et la définit sur null (ou supprime l'attribut) si la case n'est pas cochée.

18
dubek

pourquoi ne pas utiliser $ .is ()?

$('input#myId').change(
    function() {
        if ($(this).is(':checked')) {
            // do stuff here 
        } else {
            // do other stuff here
        }
});
8
solsTiCe

Ceci est une réponse de MorningZ (je l'ai trouvée ici ) qui est totalement logique:

La partie qui vous manque est que "case à cocher" est un objet jQuery, pas un objet DOM de case à cocher

donc:

checkbox.checked Commettrait une erreur car il n'y a pas de propriété .checked D'un objet jQuery

donc:

checkbox[0].checked Fonctionnerait puisque le premier élément d'un tableau jQuery est l'objet DOM lui-même.

Ainsi, dans votre fonction change(), vous pouvez utiliser

$(this)[0].checked
2
Richard
$('input#myId').toggle(
  function(e){
    e.preventDefault();
    //do stuff      
    $(this).attr('checked', 'true');
  },
  function(e){
    e.preventDefault();
    //do other stuff        
    $(this).attr('checked', 'false');
  }
);
1
adam

cela a fonctionné pour moi ............ vérifiez-le

$(":checkbox").click(function(){
if($(this).attr("id").split("chk_all")[1])
 {
  var ty  = "sel"+$(this).attr("id").split("chk_all")[1]+"[]";
  if($(this).attr("checked"))
   {
    $('input[name="'+ty+'"]').attr("checked", "checked");
   }
  else
   {
    $('input[name="'+ty+'"]').removeAttr("checked");
   }
 }
})
1
Harikrishnan

Essayer:

$(":checkbox").click(function(){
  if($(this).attr("checked"))
   {
    $('input[name="name[]"]').attr("checked", "checked");
   }
  else
   {
    $('input[name="name[]"]').removeAttr("checked");
   }
})
0
Harikrishnan
    $("input[type=checkbox][checked=false]")// be shure to set to false on ready
    $("input#Checkbox1").change(function() {
        if ($(this).attr("checked")) {
            $("#chk1").html("you just selected me")//the lable
        } else {$("#chk1").html("you just un selected me") }    
    });
0
philljohn

Essayez d'utiliser une fonction non jquery:

function chkboxToggle() {
  if ($('input#chkbox').attr('checked'))
    // do something
  else
    // do something else
}

puis sous votre forme:

<input id="chkbox" type="checkbox" onclick="chkboxToggle()" />
0
Huy

J'ai fait une approche similaire mais en utilisant simplement l'attribut vérifié tel que

 //toggles checkbox on/off
    $("input:checkbox").change(
        function(){
           if(!this.checked){
             this.checked=true;
           }
           else{
             this.checked=false;
           }
         }
       );
 //end toggle
0
Nelson