Changer le css de l'élément parent de la case à cocher si elle est cochée ou décochée
-
05-07-2019 - |
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.
La solution
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
.Autres conseils
Il existe un meilleur moyen de savoir si la case à cocher a été cochée:
$(this).is(':checked')
Il est un peu plus robuste.
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)
le meilleur est
if($("this").is(':checked'))
{
$(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"})
}
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 ....)