[SOLUCIONADO] Checkbox que marca un elemento en el que se encuentra

#1 (**permalink**) 07/09/2016, 12:14

Buenas,
estoy probando con este código a hacer que al marcar un checkbox me marque el campo entero de color verde, el problema es que no sé cómo hacer que coloree únicamente el campo del checkbox, ya que me los colorea todos, marque el que marque:

Código:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>select check</title>
	<style type="text/css" media="screen">
		.bg{background-color: green;}
	</style>
</head>
<body>
	<div class="item">
		<input type="checkbox" class="checking"><span>Activando checkbox y color de fondo</span>
	</div>
	<div class="item">
		<input type="checkbox" class="checking"><span>Activando checkbox y color de fondo</span>
	</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$( "input[type='checkbox']").click(function() {
     $('.item').toggleClass('bg');
});
</script>		
</body>
</html>

A ver si alguien me puede ayudar, un saludo!!!

sintel_1 · #2 (**permalink**) 07/09/2016, 15:51

Hola.

puedes usar la funcion parent() para seleccionar el elemento padre

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select check</title>
    <style type="text/css" media="screen">
        .bg{background-color: green;}
    </style>
</head>
<body>
    <div class="item">
        <input type="checkbox" class="checking"><span>Activando checkbox y color de fondo</span>
    </div>
    <div class="item">
        <input type="checkbox" class="checking"><span>Activando checkbox y color de fondo</span>
    </div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$( "input[type='checkbox']").click(function() {
     $(this).parent('.item').toggleClass('bg');
});
</script>       
</body>
</html>

saludos

#3 (**permalink**) 18/09/2016, 14:47

Muchas gracias Sintel, si que me ha funcionado de esta manera!!