cambiar color de fondo del div cuando se hace clic en la casilla de verificación

Question

Tengo un formulario con varias casillas de verificación, así:

<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> 

Lo que estoy tratando de hacer es cuando se marca la casilla, cambie el color de fondo de la div, y cuando no está marcado, elimine el color de fondo. ¿Cómo puedo hacer esto usando jquery?

Gracias

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; 
} 

me gustaría recomendar la opción Agregar/Quitar clase, en lugar de cambiar el CSS del padre div directamente.

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

Answer 2

Una solución con el cambio de atributo CSS directa:

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

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

---

Otra solución usando toggleClass:

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

donde se define la clase checked en el CSS de la siguiente manera:

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

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

Answer 3

Soy consciente de que este es un viejo hilo, pero he venido buscando y esta respuesta me consiguió la mayor parte del camino. (Necesitó algunos ajustes para WordPress) Así que si alguien más aterriza en esta misma página que está usando WordPress, dale una oportunidad, funcionó muy bien para mí.

The Script

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

El CSS

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