Mudando pai elemento css da caixa de seleção se marcada ou desmarcada

Question

Basicamente, eu tenho uma caixa de seleção dentro de um elemento td e eu quero que ele tenha uma cor de fundo quando a caixa está marcada e outro cor de fundo quando a caixa de seleção está desmarcada. Portanto, em outras palavras que eu quero que ele destaque se está marcada ou não.

Eu tentei usar a mesma solução que aqui: Jquery alternância evento é mexer com valor checkbox

Mas por alguma razão eu não posso fazê-lo funcionar.

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

Ele faz adicionar a cor de fundo verde, mas não removê-lo. E se eu deixar uma caixa de seleção marcada, atualização, o td está de volta para branco e uma vez que clicar na caixa de seleção novamente, desmarcando-lo, muda o fundo do td para verde.

Eu ainda sou novo para isso, não tem idéia do que poderia estar errado aqui, tentando descobrir isso por horas agora. Uma coisa tão simples, mas simplesmente não pode fazê-lo funcionar.

Answer 1

Mudança

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

para

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

SNCE você está comparando com estrita igualar os dois tipos de dados deve ser o mesmo.

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

permitirá que você saiba que é de boolean tipo e você está comparando-a com uma corda.

Para mais informações consulte Operadores de Comparação

Answer 2

Há uma maneira melhor para ver se a opção tiver sido assinalada:

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

É um pouco mais robusto.

Answer 3

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

attr não lê atributos HTML. É enganosos que maneira. Se o fizesse atributos de leitura, o valor da cadeia para checked seria 'checked' e não 'true'. Mas ele não faz isso.

O que ele realmente faz é ler propriedades do objeto JavaScript, usando apenas nomes de atributos em vez de nomes de propriedades em poucos lugares que eles diferem. A propriedade checked dá-lhe um valor booleano por isso não há necessidade de compará-lo com qualquer coisa, você pode simplesmente dizer:

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

ou, ainda mais simples, o totalmente equivalentes:

if (this.checked)

Answer 4

melhor é

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

Answer 5

Confira este artigo sobre a diferença entre = == e == = em javascript. Ou este em operadores de igualdade em js.

Answer 6

Tente alterar o seguinte:

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

a esta:

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

Isto irá converter qualquer não-booleano para um booleano e permitir a sua comparação seguro tipo de trabalho, mesmo se a string "true" é retornado (se a falsa corda é devolvido ele irá avaliar como true embora ....)