Cambiare il colore di sfondo quando div casella di controllo è cliccato

Question

Ho una forma con diverse caselle di controllo, in questo modo:

<div><input type='checkbox' name='groupid' value='1'>1</div> 
<div><input type='checkbox' name='groupid' value='2'>2</div> 
<div><input type='checkbox' name='groupid' value='3'>3</div> 

Quello che sto cercando di fare è quando la casella è selezionata, cambiare il colore dello sfondo div, e quando è deselezionato, rimuovi il colore di sfondo. Come posso farlo usando jquery?

Grazie

Answer 1

jQuery:

$("input[type='checkbox']").change(function(){ 
    if($(this).is(":checked")){ 
     $(this).parent().addClass("redBackground"); 
    }else{ 
     $(this).parent().removeClass("redBackground"); 
    } 
}); 

CSS:

.redBackground{ 
    background-color: red; 
} 

Mi consiglia di utilizzare Aggiungi/Rimuovi di classe, al contrario di cambiare il CSS del genitore div direttamente.

DEMO: http://jsfiddle.net/uJcB7/

Answer 2

Una soluzione con l'attributo diretta CSS cambiando:

$(":checkbox").on("change", function() { 
    var that = this; 
    $(this).parent().css("background-color", function() { 
     return that.checked ? "#ff0000" : ""; 
    }); 
});​ 

DEMO:http://jsfiddle.net/YQD7c/

---

Un'altra soluzione utilizzando toggleClass:

$(":checkbox").on("change", function() { 
    $(this).parent().toggleClass("checked", this.checked); 
});​ 

Dove si definisce classe checked nei CSS come segue:

.checked { 
    background-color: #ff0000; 
}​ 

DEMO:http://jsfiddle.net/YQD7c/1/

Answer 3

Mi rendo conto che questo è un vecchio thread, ma mi è venuto a cercare e questa risposta mi ha fatto la maggior parte del modo. (necessario qualche ritocco per WordPress) Quindi, se qualcun altro atterra su questa stessa pagina che utilizza WordPress, dare una possibilità, ha funzionato alla grande per me.

The Script

jQuery("input[type='checkbox']").change(function(){ 
if(jQuery(this).is(":checked")){ 
    jQuery(this).parent().addClass("greenBackground"); 
} 
else{ 
    jQuery(this).parent().removeClass("greenBackground"); 
} }); 

Il CSS

.greenBackground{ 
background-color: #06530e; 
color: #ffffff;}