Modifica dell'elemento genitore della casella di controllo css se selezionato o deselezionato

Question

Fondamentalmente ho una casella di controllo all'interno di un elemento td e voglio che abbia un colore di sfondo quando la casella è selezionata e un altro colore di sfondo quando la casella è deselezionata. Quindi, in altre parole, voglio evidenziare se è selezionato o meno.

Ho provato a utilizzare la stessa soluzione qui: Jquery toggle L'evento sta rovinando il valore della casella di controllo

Ma per qualche motivo non riesco a farlo funzionare.

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

Aggiunge il colore di sfondo verde ma non lo rimuove. E se lascio selezionata una casella di spunta, aggiorna, la td ritorna in bianco e una volta facendo di nuovo clic sulla casella di controllo, deselezionandola, cambia lo sfondo della td in verde.

Sono ancora nuovo a questo, non ho idea di cosa potrebbe esserci di sbagliato qui, sto provando a capirlo da ore ormai. Una cosa così semplice ma proprio non riesco a farlo funzionare.

Answer 1

Cambia

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

a

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

Snce che stai confrontando usando rigorosamente uguale i due tipi di dati devono essere uguali.

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

ti farà sapere che è di tipo booleano e lo stai confrontando con una stringa.

Per maggiori informazioni vedi Operatori di confronto

Answer 2

C'è un modo migliore per vedere se la casella di controllo è stata selezionata:

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

È un po 'più robusto.

Answer 3

  

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

attr non legge gli attributi HTML. È ingannevole in questo modo. Se avesse letto gli attributi, il valore della stringa per controllato sarebbe 'controllato' e non 'true' . Ma non lo fa.

Quello che fa effettivamente è leggere le proprietà degli oggetti JavaScript, usando solo i nomi degli attributi invece dei nomi delle proprietà nei pochi punti in cui differiscono. La proprietà controllato ti dà un valore booleano quindi non è necessario confrontarlo con nulla, puoi semplicemente dire:

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

o, ancora più semplice, l'equivalente totale:

if (this.checked)

Answer 4

il migliore è

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

Answer 5

Dai un'occhiata a questo articolo sulla differenza tra =, == e == = in javascript. Oppure questo sugli operatori di uguaglianza in js.

Answer 6

Prova a cambiare questo:

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

a questo:

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

Questo convertirà qualsiasi non-booleano in un valore booleano e consentirà al tuo confronto sicuro di tipo di funzionare anche se la stringa "vero" viene restituito (se viene restituita la stringa false, tuttavia verrà valutata come vera ....)