Changer le css de l'élément parent de la case à cocher si elle est cochée ou décochée

Question

En gros, j'ai une case à cocher à l'intérieur d'un élément td et je souhaite lui attribuer une couleur d'arrière-plan lorsque la case à cocher est cochée et une autre couleur d'arrière-plan lorsque la case à cocher est décochée. Donc, en d'autres termes, je veux qu'il mette en évidence si c'est coché ou non.

J'ai essayé d'utiliser la même solution que celle décrite ici: Jquery toggle L'événement joue avec la valeur de la case à cocher

Mais pour une raison quelconque, je ne peux pas le faire fonctionner.

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

Il ajoute la couleur de fond verte mais ne la supprime pas. Et si je laisse une case à cocher cochée, actualisez-la, le td redevient blanc et, une fois que vous avez coché la case et décoché, le fond du td devient vert.

Je suis encore nouveau dans ce domaine, je n'ai aucune idée de ce qui pourrait ne pas se passer ici. J'essaie de le comprendre depuis des heures. Une chose aussi simple mais qui ne peut tout simplement pas fonctionner.

Answer 1

Changer

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

à

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

Vous comparez en utilisant strict égal les deux types de données doivent être identiques.

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

vous indiquera qu'il s'agit d'un type booléen et que vous le comparez à une chaîne.

Pour plus d'informations, voir Opérateurs de comparaison

.

Answer 2

Il existe un meilleur moyen de savoir si la case à cocher a été cochée:

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

Il est un peu plus robuste.

Answer 3

  

if ($ (this) .attr ("coché") === "vrai")

attr ne lit pas les attributs HTML. C'est trompeur de cette façon. S'il lisait les attributs, la valeur de chaîne pour vérifié serait 'vérifié' et non 'true' . Mais ça ne fait pas ça.

En réalité, il lit les propriétés d'objet JavaScript, en n'utilisant que des noms d'attributs plutôt que des noms de propriétés aux endroits où ils diffèrent. La propriété vérifié vous donne une valeur booléenne, il n'est donc pas nécessaire de la comparer à quoi que ce soit, vous pouvez simplement dire:

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

ou, encore plus simple, le tout à fait équivalent:

if (this.checked)

Answer 4

le meilleur est

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

Answer 5

Consultez cet article sur la différence entre =, == et == = en javascript. Ou ceci sur les opérateurs d'égalité dans js.

Answer 6

Essayez de changer ceci:

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

à ceci:

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

Ceci convertira tout booléen non booléen en booléen et permettra à votre comparaison sécurisée de types de fonctionner même si la chaîne "true" est utilisée. est renvoyé (si la chaîne false est renvoyée, sa valeur sera vraie si ....)