Como verificar radio button?

Assuntos Gerais
#1

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

Minha idéia é algo do tipo:

[code]<input type=“radio” value=“valor1” name=“radiobotao1”>

<script language=“javascript”>
function verificar()
{
if (document.formulario.radiobotao1[0].checked)
<input type=button value=- onclick=hide()>
}
</script>
[/code]

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

#2

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>
#3

@pedrinho20

Ficou assim:

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

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 “&lt;input type="text" id="fone1" name="fone[1]" maxlength="14" size="14"/&gt;”

#4

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>
#5

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

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

[code]<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<title>Untitled Document</title>
<script type=“text/javascript”>
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”;
}
}
</script>
</head>

<body>

Nome:

CPF:

RG:

Acompanhantes:
<form id="formulario" name="formulario"> <input type="radio" name="radiosim" id="radiosim" value="Sim"> Sim
<input type="radio" name="radio" id="radio" value="Sim"> Não
<input type="button" id="botao" name="botao" value="Teste" onclick="verificar()"/> </form> <label id=label1 style="display:none">CPF:</label><input type=text id=text1 style="display:none"> <label id=label2 style="display:none">RG:</label><input type=text id=text2 style="display:none"> <label id=label3 style="display:none">Telefone:</label><input type=text id=text3 style="display:none"> <label id=label4 style="display:none">Passaporte:</label><input type=text id=text4 style="display:none"> <input name="button" type=button onclick=show() value=+ /> <input type=button value=- onclick=hide()> <script type=text/javascript> 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";

}
</script>

Passaporte:

Endereço:

Telefone:

</body>[/code]

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

#6

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.

#7

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

#8