Como verificar radio button?

8 de maio de 2012 6 respostas

LucasAdri07 8 de maio de 2012

Olá pessoal gostaria de saber como verifico se um radio button está checado para fazer uma ação.

Minha idéia é algo do tipo:

&lt;input type="radio" value="valor1" name="radiobotao1"&gt;

&lt;script language="javascript"&gt;
function verificar()
{
if (document.formulario.radiobotao1[0].checked)
&lt;input type=button value=- onclick=hide()&gt;
}
&lt;/script&gt;

Então no caso ele por exemplo, ao selecionar o primeiro radio button ele criaria um botão "-" para o usuário.

Só que não está dando certo, alguem tem alguma ajuda?

Grato, Lucas

6 Respostas

pedrinho20 8 de mai. de 2012

Lucas,

Segue a ajuda…

PS > Creio que o JQuery vai te atender melhor que JS puro.

<html>
<head>
<title>Exemplo</title>
<script type="text/javascript">
    function verificar(){
        if(document.formulario.radio.checked == true){
            alert('...'); // Aqui você coloca o botão.
        } 
} 
</script>  
</head>
<body>
<form id="formulario" name="formulario">
            <input type="radio" id="radio" name="radio" />
            <input type="button" id="botao" name="botao" value="Teste" onclick="verificar()"/>
</form> 
</body>   
</html>

LucasAdri07 8 de mai. de 2012

@pedrinho20

Ficou assim:

<head> <title>Exemplo</title> <script type="text/javascript"> function verificar(){ if(document.formulario.radio.checked == true){ alert('<input type="text" id="fone1" name="fone[1]" maxlength="14" size="14"/>'); // Aqui você coloca o botão. } } </script> </head> <body> <form id="formulario" name="formulario"> <input type="radio" id="radio" name="radio" /> <input type="button" id="botao" name="botao" value="Teste" onclick="verificar()"/> </form> </body> </html>

Eu mudei, ao invés de criar um botão ele tem que criar um textbox, só que ao invés disso ele me mostra um alerta na tela com essa msg “<input type="text" id="fone1" name="fone[1]" maxlength="14" size="14"/>”

pedrinho20 8 de mai. de 2012

Agora dentro do bloco If você cria o input text dinamicamente com o createElement. Segue abaixo:

<html>
<head>  
<title>Exemplo</title>  
<script type="text/javascript">  
    function verificar(){  
        if(document.formulario.radio.checked == true){  
            
           var elemento = document.createElement('input');
           elemento.type = 'text';
           document.body.appendChild(elemento)
        }    
}   
</script>    
</head>  
<body>  
<form id="formulario" name="formulario">  
            <input type="radio" id="radio" name="radio" />  
            <input type="button" id="botao" name="botao" value="Teste" onclick="verificar()"/>  
</form>   
</body>     
</html>

LucasAdri07 8 de mai. de 2012

Estou no caminho certo, só tenho um problema agora.

Minha página é essa (Esta genérica pois é somente um teste):

&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;script type="text/javascript"&gt;
    function verificar(){
        if(document.formulario.radiosim.checked == true){
        document.getElementById('text1').style.display="block"; 
document.getElementById('text2').style.display="block"; 
document.getElementById('text3').style.display="block"; 
document.getElementById('text4').style.display="block"; 
document.getElementById('label1').style.display="block";
document.getElementById('label2').style.display="block";
document.getElementById('label3').style.display="block";
document.getElementById('label4').style.display="block";   
        } 
} 
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;


<p>Nome:  </p>
<p>CPF:  </p>
<p>RG:</p>
<p>Acompanhantes: <br />
&lt;form id="formulario" name="formulario"&gt;  
&lt;input type="radio" name="radiosim" id="radiosim" value="Sim"&gt; Sim<br>
&lt;input type="radio" name="radio" id="radio" value="Sim"&gt; Não<br>
&lt;input type="button" id="botao" name="botao" value="Teste" onclick="verificar()"/&gt; 
&lt;/form&gt;
&lt;label id=label1 style="display:none"&gt;CPF:&lt;/label&gt;&lt;input type=text id=text1 style="display:none"&gt;
&lt;label id=label2 style="display:none"&gt;RG:&lt;/label&gt;&lt;input type=text id=text2 style="display:none"&gt;
&lt;label id=label3 style="display:none"&gt;Telefone:&lt;/label&gt;&lt;input type=text id=text3 style="display:none"&gt;
&lt;label id=label4 style="display:none"&gt;Passaporte:&lt;/label&gt;&lt;input type=text id=text4 style="display:none"&gt;
  &lt;input name="button" type=button onclick=show() value=+ /&gt;
  &lt;input type=button value=- onclick=hide()&gt;
  &lt;script type=text/javascript&gt;
function hide(){
document.getElementById('text1').style.display="none"; //for hide
document.getElementById('text2').style.display="none"; //for hide
document.getElementById('text3').style.display="none"; //for hide
document.getElementById('text4').style.display="none"; //for hide
document.getElementById('label1').style.display="none";
document.getElementById('label2').style.display="none";
document.getElementById('label3').style.display="none";
document.getElementById('label4').style.display="none";
}
function show(){
document.getElementById('text1').style.display="block"; //for show
document.getElementById('text2').style.display="block"; //for show
document.getElementById('text3').style.display="block"; //for show
document.getElementById('text4').style.display="block"; //for show
document.getElementById('label1').style.display="block";
document.getElementById('label2').style.display="block";
document.getElementById('label3').style.display="block";
document.getElementById('label4').style.display="block";

}
    &lt;/script&gt;
  </p>
<p>Passaporte:  </p>
<p>Endereço:  </p>
<p>Telefone: </p>
&lt;/body&gt;

Ele me exibe o que eu quero, só que somente na hora que clica no botão "Teste"

Preciso que assim que o radio button for checkado, ele ja exiba esses campos.

Tem alguma propriedade no radio button do tipo

checked = validar();

Grato, Lucas

--------

EDIT:

Já consegui, o radio button tem o onclick também então só coloquei

&lt;input type="radio" name="radiosim" id="radiosim" value="Sim" onclick="verificar()"&gt; Sim<br>

LucasAdri07 8 de mai. de 2012

Agora o meu problema é o seguinte:

Se o usuário seleciona o radio button “Sim” e depois coloca o “Não” tem que trocar os radioo button checkados e apagar os campos criados.

Para apagar os campos criados já tenho o seguinte:

document.getElementById('text1').style.display="none"; document.getElementById('text2').style.display="none"; document.getElementById('text3').style.display="none"; document.getElementById('text4').style.display="none"; document.getElementById('label1').style.display="none"; document.getElementById('label2').style.display="none"; document.getElementById('label3').style.display="none"; document.getElementById('label4').style.display="none";

O problema é que não sei fazer essa troca, do botão sim para o não.

pedrinho20 8 de mai. de 2012

O atributo Name deve conter o mesmo valor.

Você está fazendo assim …

<input type="radio" name="radiosim" id="radiosim" value="Sim"> Sim<br>  
<input type="radio" name="radio" id="radio" value="Sim"> Não<br>

Faça assim.

<input type="radio" name="radio" id="radiosim" value="Sim"> Sim<br>  
<input type="radio" name="radio" id="radionao" value="Sim"> Não<br>

Consulte esse site -> http://www.w3schools.com/html/html_forms.asp

Criado 8 de maio de 2012

Ultima resposta 8 de mai. de 2012

Respostas 6

Participantes 2

6 Respostas

Topicos relacionados