JQuery Toggle-Ereignis wird mit Checkbox Wert Messing

Question

Ich jQuerys Toggle Event mit ein paar Sachen zu tun, wenn ein Benutzer eine Checkbox klickt, wie folgt aus:

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

Das Problem ist, dass das Kontrollkästchen nicht aktiviert wird wenn ich auf das Kontrollkästchen klicke. (Alle Sachen, die ich in die Wechselereignis gesetzt haben ordnungsgemäß funktioniert.)

Ich habe versucht, die folgenden:

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

und

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

und sogar einfach

return true; 

Aber nichts funktioniert. Kann mir jemand sagen, wo ich falsch liege?

Bearbeiten - Danke an alle, die geantwortet haben. Dreas 'Antwort hat fast für mich funktioniert, außer für den Teil, der das Attribut überprüft hat. Dies funktioniert perfekt (obwohl es ein bisschen hacky ist)

$('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'); 
}); 

Vielen Dank noch einmal an alle, die geantwortet haben.

Answer 1

Verwenden Sie das change Ereignis statt des toggle Ereignis, wie solche:

$('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' 
}); 

Answer 2

$('input#myId').toggle(
    function(e){ 
    e.preventDefault(); 
    //do stuff  
    $(this).attr('checked', 'true'); 
    }, 
    function(e){ 
    e.preventDefault(); 
    //do other stuff   
    $(this).attr('checked', 'false'); 
    } 
); 

Answer 3

Während der Verwendung des change Event-Handler von Dreas Grech vorgeschlagen angemessen ist, es funktioniert nicht gut in IE 6 & 7, die das Ereignis change nicht auslöst, bis der Fokus unscharf ist (dh, bis Sie außerhalb des Bereichs des Kontrollkästchens klicken). Wie QuirksMode sagen, "es ist ein ernsthafter Fehler".

Möglicherweise möchten Sie die click Event-Handler verwenden, aber das wird nicht mit Tastaturnavigation funktionieren. Sie müssen auch einen keyup Handler registrieren ...

Siehe auch this related question.

Ich habe noch keine gute Cross-Browser-Lösung gefunden, die sowohl Mausklicks als auch Tastaturaktivierung der Checkboxen unterstützt (und nicht zu viele Ereignisse auslöst).

---

In Bezug auf Ihre Lösung zum Prüfen, ob das Kontrollkästchen aktiviert ist oder nicht, stattdessen Ihre eigenen checked Klasse hinzuzufügen, können Sie checked Attribut HTML ist verwenden:

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

Jeder Browser das checked Attribut eines Sets input Element auf den Wert "checked", wenn das Kontrollkästchen aktiviert ist, und setzt es auf null (oder löscht das Attribut), wenn das Kontrollkästchen nicht aktiviert ist.

Answer 4

habe ich einen ähnlichen Ansatz, sondern einfach das Attribut checked mit wie

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

Answer 5

Versuchen Sie, eine nicht-Jquery-Funktion:

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

dann in der Form:

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

Answer 6

Dies ist eine Antwort von MorningZ (ich fand es here), die völlig Sinn macht:

Das Teil ist Sie vermissen, dass „Checkbox“ ein jQuery-Objekt, kein Checkbox DOM-Objekt

so:

checkbox.checked sicher Fehler würde, weil es keine .checked Eigenschaft eines jQuery Objekt

so:

checkbox[0].checked seit dem ersten Elemente auf einem jQuery-Array arbeiten würde, ist das DOM-Objekt i selbst.

Also in Ihrem change() Funktion Sie

$(this)[0].checked 

Answer 7

dies für mich gearbeitet können ............ überprüfen es

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

Answer 8

Versuchen:

$(":checkbox").click(function(){ 
    if($(this).attr("checked")) 
    { 
    $('input[name="name[]"]').attr("checked", "checked"); 
    } 
    else 
    { 
    $('input[name="name[]"]').removeAttr("checked"); 
    } 
}) 

Answer 9

Warum nicht $ .is() verwenden?

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

Answer 10

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