Cambiar el elemento principal de la casilla de verificación css si está activado o desactivado

Question

Básicamente tengo una casilla de verificación dentro de un elemento td y quiero que tenga un color de fondo cuando la casilla esté marcada y otro color de fondo cuando la casilla no esté marcada. En otras palabras, quiero resaltar si está marcado o no.

Intenté usar la misma solución que aquí: Interruptor de Jquery el evento se está confundiendo con el valor de la casilla de verificación

Pero por alguna razón no puedo hacer que funcione.

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

Añade el color de fondo verde pero no lo elimina. Y si dejo una casilla de verificación marcada, actualizar, el td vuelve a ser blanco y una vez que hace clic en la casilla de verificación nuevamente, al desmarcarlo, cambia el fondo del td a verde.

Todavía soy nuevo en esto, no tengo idea de lo que podría estar mal aquí, he estado tratando de resolverlo durante horas. Una cosa tan simple, pero no puedo hacer que funcione.

Answer 1

Cambiar

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

a

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

Es probable que esté comparando el uso estricto o igual que los dos tipos de datos deben ser iguales.

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

te hará saber que es de tipo booleano y que lo estás comparando con una cadena.

Para obtener más información, consulte Operadores de comparación

Answer 2

Hay una mejor manera de ver si la casilla de verificación se ha marcado:

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

Es un poco más robusto.

Answer 3

  

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

attr no lee los atributos HTML. Es engañoso de esa manera. Si leyó los atributos, el valor de la cadena para verificado sería 'revisado' y no 'true' . Pero no hace eso.

Lo que realmente hace es leer las propiedades del objeto JavaScript, solo usa nombres de atributos en lugar de nombres de propiedades en los pocos lugares en que difieren. La propiedad checked le da un valor booleano por lo que no hay necesidad de compararlo con nada, solo puede decir:

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

o, incluso más sencillo, el equivalente total:

if (this.checked)

Answer 4

el mejor es

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

Answer 5

Consulte este artículo sobre la diferencia entre =, == y == = en javascript. O esto sobre operadores de igualdad en js.

Answer 6

Intenta cambiar esto:

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

a esto:

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

Esto convertirá cualquier no booleano en un booleano y permitirá que la comparación segura de tu tipo funcione incluso si la cadena " true " se devuelve (si se devuelve la cadena falsa, se evaluará como verdadera aunque ...)