Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rodolforej

mudar cor de fundo div quando checkbox selecionado

Por , em Desenvolvimento frontend

Recommended Posts

rodolforej    0

rodolforej
Postado

Boa noite

amigos, uma ajudinha ai, to criando um formulario, e nao entendo de programação, entao peço ajuda aos membros..

Tenho 6 div's nomeadas 1, 2,3 e assim por diante;

Tenho 6 checkbox cada um dentro de uma div acima;

 

Preciso que quando selecionar por exemplo o checkbox da primeira div, essa div fique da cor cinza, porem se eu tirar a seleção dele essa div volte a ser branca, entende...

 

assim faria nas 5 outras div's, seria possivel uma ajuda ai..?

 

Obrigado.. até masi..

Compartilhar este post

Link para o post
Compartilhar em outros sites

mangakah    217

mangakah
Postado

Selecionar o elemento pai apenas com CSS infelizmente ainda não é possível. Esse recurso está previsto para o CSS4, mas ainda demorará muito até que esteja disponível.

Por hora, você pode usar o método .parent() do jQuery para selecionar o elemento pai e aplicar o plano de fundo a ele:

  $('input').on('click', function() {
    $('input[type="checkbox"]').parent().css('background', 'white');
    $('input[type="checkbox"]:checked').parent().css('background', 'gray');
  });

Compartilhar este post

Link para o post
Compartilhar em outros sites

mangakah    217

mangakah
Postado 




<!DOCTYPE html>



<meta charset="UTF-8">


 



<div id="suaDiv">



    <input type="checkbox" name="check1" id="check1"><label for="check1">Check me!</label>



</div>


 



<!-- Inserir jQuery -->



<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


 



<script>



  // Coloque o código do meu post anterior aqui



</script>







			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito