Ändern Checkbox des übergeordneten Elements css, wenn aktiviert oder deaktiviert

Question

Im Prinzip habe ich eine Checkbox in einem td-Element, und ich will es eine Hintergrundfarbe haben, wenn das Kontrollkästchen aktiviert ist und eine andere Hintergrundfarbe, wenn das Kontrollkästchen nicht aktiviert ist. Also mit anderen Worten möchte ich es markieren, ob es aktiviert ist oder nicht.

Ich habe versucht, die gleiche Lösung wie in hier zu verwenden: JQuery Toggle Ereignis messing mit Checkbox Wert

Aber aus irgendeinem Grund kann ich nicht bekommen es funktioniert.

    $(document).ready(function(){
    $("input:checkbox").change(function() {
        if($(this).attr("checked") === "true") {
            // CHECKED, TO WHITE
            $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"});
            return;
        }
        //NOT CHECKED, TO GREEN
        $(this).parent().css({"background" : "#b4e3ac", "-moz-border-radius" : "5px"});
    });
});

Es die grüne Hintergrundfarbe fügt sie aber nicht entfernen. Und wenn ich ein Kontrollkästchen aktiviert lassen, aktualisieren, die td zu weiß ist wieder da und einmal auf der Checkbox wieder zu klicken, es Abhaken es die TDs Hintergrund auf grün wechselt.

ich diese noch neu bin, haben keine Ahnung, was hier falsch sein könnte, versucht es herauszufinden stundenlang jetzt. Eine solche einfache Sache, aber nur kann sie nicht arbeiten.

Answer 1

Ändern

if($(this).attr("checked") === "true")

if($(this).attr("checked") === true)

Snce Sie vergleichen streng gleich die beiden Datentypen müssen identisch sein.

typeof ( $(this).attr ( "checked" ) )

wird Sie wissen lassen, dass sie von ist boolean Typ und Sie vergleichen es in einen String.

Für weitere Informationen finden Sie unter Vergleichsoperatoren

Answer 2

Es gibt einen besseren Weg, um zu sehen, ob das Kontrollkästchen aktiviert wurde:

$(this).is(':checked')

Es ist ein bisschen robuster.

Answer 3

  

if ($ (this) .attr ( "geprüft") === "true")

attr keine HTML-Attribute lesen. Es ist trügerisch, dass Art und Weise. Wenn es Attribute lesen würde, würde der String-Wert für checked 'checked' und nicht 'true' werden. Aber es macht das nicht.

Was es tatsächlich tut, ist JavaScript Objekteigenschaften lesen, nur Attributnamen anstelle von Eigenschaftsnamen in den wenigen Orten sie sich unterscheiden. Die checked Eigenschaft gibt Ihnen einen Booleschen Wert, so gibt es keine Notwendigkeit, es zu etwas zu vergleichen, kann man einfach sagen:

if ($(this).attr('checked'))

oder, noch einfacher, die völlig äquivalent:

if (this.checked)

Answer 4

beste ist

if($("this").is(':checked'))
 {
   $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"})
 }

Answer 5

Sehen Sie sich diese Artikel auf dem Unterschied zwischen =, rel="nofollow == und == = in Javascript. Oder diese auf Gleichheitsoperatoren in js.

Answer 6

Versuchen

Ändern folgt aus:

$(this).attr("checked") === "true"

folgt aus:

!!$(this).attr("checked") === true

Dies wird jegliche nicht-boolean in einen Booleschen konvertieren und Ihrer Art sicher Vergleich erlauben, selbst wenn die Zeichenfolge „true“ zu arbeiten zurückgegeben (wenn die Zeichenfolge falsch zurückgegeben werden, es aber zu true ausgewertet wird ....)