Ir para conteúdo

POWERED BY:

Arquivado

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

Fabiano Magno Pechibella

Ocultar campos ao selecionar Radio Button

Por , em Javascript

Recommended Posts

Fabiano Magno Pechibella    0

Fabiano Magno Pechibella
Postado

Fala galera,

 

 

To precisando de um help, atualmente tenho uma pesquisa de satisfação que existem várias opções.

 

Uma das perguntas é composta com;

 

Pergunta?

a - Opção 1
b - Opção 2
c - Opção 3

d - Opção 4

Se a Opção 1 for selecionada aparece um campo do tipo textfield e oculta as demais opções.

 

Até ai tudo bem, o que eu estou com dificuldade é para que quando uma das opções for selecionada habilita o campo textfield e oculta as demais.

 

Alguém já fez algo do genero

 

Abs,

Fabiano Magno Pechibella

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabiano Magno Pechibella    0

Fabiano Magno Pechibella
Postado

Falae kikombat,

 

abaixo segue o js e o html...

<script type="text/javascript">
	function valor(qual) {
		if(qual=="DscEncontrouFacil") {
			document.PesquisaSatisfacao.DscEncontrouFacil.style.display="block";
			document.PesquisaSatisfacao.DscEncontrouDificil.style.display="none";
			document.PesquisaSatisfacao.DscNaoEncontrou.style.display="none";
		}

		if(qual=="DscEncontrouDificil") {
			document.PesquisaSatisfacao.DscEncontrouFacil.style.display="none";
			document.PesquisaSatisfacao.DscEncontrouDificil.style.display="block";
		}
				
		if(qual=="DscAssuntoCorrelato") {						
			document.PesquisaSatisfacao.DscEncontrouDificil.style.display="none";
			document.PesquisaSatisfacao.DscAssuntoCorrelato.style.display="block";
		}
		
		if(qual=="DscNaoEncontrou") {
			document.PesquisaSatisfacao.DscAssuntoCorrelato.style.display="none";
			document.PesquisaSatisfacao.DscNaoEncontrou.style.display="block";
		}
}
</script>

 <input type="radio" name="qual" id="radio" value="DscEncontrouFacil" onclick="valor('DscEncontrouFacil')" />
<strong>a)</strong> Opção 1<br />
<input type="text" name="DscEncontrouFacil" id="o-que-procurava" class="fields" size="70" style="display:none;" />
<input type="radio" name="qual" id="radio2" value="DscEncontrouDificil" onclick="valor('DscEncontrouDificil')" />
<strong>b)</strong>Opção 2<br />
<input type="text" name="DscEncontrouDificil" id="qual-conteudo" class="fields" size="70" style="display:none;" />
<input type="radio" name="qual" id="radio3" value="DscAssuntoCorrelato" onclick="valor('DscAssuntoCorrelato')" />
<strong>c)</strong> Opção 3</strong><br />
<input type="text" name="DscAssuntoCorrelato" id="que-informacao" class="fields" size="70" style="display:none;" />
<input type="radio" name="qual" id="radio4" value="DscNaoEncontrou" onclick="valor('DscNaoEncontrou')" />
<strong>d)</strong> Opção 4
<input type="text" name="DscNaoEncontrou" id="nao-encontrei" class="fields" size="70" style="display:none;" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

kikombat    16

kikombat
Postado

acho que se você der umas pinceladas fica bom, mas veja se algo parecido resolve seu problema

 

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('.radio').click(function() {
                    $('label').hide();
                    $(this).parent().show();
                    valor = $(this).val();
                    $('.fields').val(valor).show();
                    $('.cancel').show();
                });
                $('.cancel').click(function() {
                    $('label').show();
                    $('button,.fields').hide();
                });
            });

        </script>
        <style>
            .fields,.cancel{display: none;}
        </style>
    </head>
    <body>
        <label for="f1"><input type="radio" name="qual" class="radio" value="DscEncontrouFacil" id="f1" /><b>a)</b> Opção 1</label><br/>
        <label for="f2"><input type="radio" name="qual" class="radio" value="DscEncontrouDificil" id="f2" /><b>b)</b> Opção 2 </label><br/>
        <label for="f3"><input type="radio" name="qual" class="radio" value="DscAssuntoCorrelato" id="f3" /><b>c)</b> Opção 3 </label><br/>
        <label for="f4"><input type="radio" name="qual" class="radio" value="DscNaoEncontrou" id="f4" /><b>d)</b> Opção 4 </label><br/>
        <input type="text" name="resp"  class="fields" size="70" />
        <button class="cancel">X</button>
    </body>
</html>

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