Ir para conteúdo

POWERED BY:

Arquivado

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

Breno Ulitska

Mostrar e ocultar divs

Por , em Javascript

Recommended Posts

Breno Ulitska    0

Breno Ulitska
Postado

Boa tarde galera.

 

Bom, estou DESESPERADO. kkkkk

Preciso resolver hoje vários problemas do meu tcc, pois semana que vem preciso fazer uma breve apresentação.

É o seguinte...

Tenho dois rádio button.

EXEMPLO: Quando clicar no radio button "UM" preciso que apareça logo abaixo um texto de informação dele.

Quando clicar no radio button "DOIS" preciso que desapareça as infos do radio button "UM" e no lugar apareça as infos do radio button "DOIS".

 

Fiz uns códigos em javascript, css e html mas não está funcionando.

Os códigos que tenho são esses:

 

OBS.: SALVE OS ARQUIVOS TODOS NA MESMA PASTA E COM OS DEVIDOS NOMES

 

PÁGINA COM OS RADIOS BUTTON - SALVE COMO index.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>TITULO</title>

<script src="mostrar_ocultar.js" type="text/javascript"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<form action="#" method="POST" enctype="multipart/form-data" name="cad_lugar">

 

<input type="radio" name="opcao" value="um"/>Exemplo 1

<input type="radio" name="opcao" value="dois"/>Exemplo 2

 

 

<div id="um">

Infos radio button 1:

</div>

 

 

<div id="dois">

Infos radio button 2:

</div>

 

</form>

 

</body>

</html>

 

----------------------------------------------------------------------------------------------------------

 

PÁGINA JAVA SCRIPT - SALVE COMO mostrar_ocultar.js

 

$(document).ready(function(){

 

$("#um").hide();

$("#dois").hide();

 

$("input[type=radio][name=opcao][value=um]").click(function(){

$("#um").show("slow");

$("#dois").hide();

});

 

$("input[type=radio][name=opcao][value=dois]").click(function(){

$("#dois").show("slow");

$("#um").hide();

});

});

 

 

----------------------------------------------------------------------------------------------------------

 

PÁGINA CSS - SALVE COMO style.css

 

#div1 {

height:200px;

width:300px;

}

 

#div2 {

height:200px;

width:300px;

}

 

 

Bom galera, é isso. Espero que alguém possa me ajudar o mais breve possível. Valeu desde já (:

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

exemplo funcional:

http://code.imasters.com.br/index.php?/topic/133-ocultarexibir-elementos-apartir-de-acao-em-radioselect/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito