2

Estou trabalhando em um sistema de digitação de um formulário de papel, onde tenho algumas opções de radiobutton, por exemplo:

<fieldset>
   <legend> Disponibilidade de energia elétrica? </legend>
   <label for="sim"> <input type="radio" name="energia" value="sim">Sim</label>
   <label for="nao"> <input type="radio" name="energia" value="nao">Não</label>
</fieldset>

O caso é que, eventualmente, um digitador clica "sem querer" em um radio para responder a uma pergunta do formulário, no entanto, a questão está em branco no papel, e seria necessário desfazer a seleção.

O comportamento padrão do group do radiobutton é de permitir alterar entre as opções e não de des-selecionar o campo.

Tampouco poderia ser uma função de Limpar Formulário, pois o digitador teria que re-digitar todos os outros campos.

Alguma ideia? Alguém já teve o mesmo problema? Como dar um reset no grupo "energia", por exemplo?

2
  • 3
    Podes colocar um exemplo do HTML para percebermos melhor a estrutura?
    – Sergio
    Commented 20/06/2015 às 18:50
  • Obrigado @Sergio, realmente a pergunta ficou mais clara. De qualquer forma já tive boas respostas também. Abs Commented 20/06/2015 às 19:30

2 Respostas 2

1

Acredito que você queira apenas limpar a seleção de uma única questão, então eu criei um método passando o parâmetro de qual questão é e depois concateno pra procurar apenas os radio pertencentes aquela questão.

Exemplo: Questão 1 -> radios resposta1

function limparSelecao(questao) {
  var radios = document.querySelectorAll("input[name=resposta" + questao + "]");
  for (var i = 0; i < radios.length; i++)
    radios[i].checked = false;
}

function limparTudo() {
  var radios = document.querySelectorAll("input[name^=resposta]");
  for (var i = 0; i < radios.length; i++)
    radios[i].checked = false;
}
<p>Questão 1</p>
<input type="radio" name="resposta1" value="1" /> Resposta 1 <br/>
<input type="radio" name="resposta1" value="2" /> Resposta 2 <br/>
<input type="radio" name="resposta1" value="3" /> Resposta 3 <br/>
<input type="radio" name="resposta1" value="4" /> Resposta 4 <br/>
<input type="button" value="Limpar" onclick="limparSelecao(1)" />

<p>Questão 2</p>
<input type="radio" name="resposta2" value="1" /> Resposta 1 <br/>
<input type="radio" name="resposta2" value="2" /> Resposta 2 <br/>
<input type="radio" name="resposta2" value="3" /> Resposta 3 <br/>
<input type="radio" name="resposta2" value="4" /> Resposta 4 <br/>
<p><input type="button" value="Limpar" onclick="limparSelecao(2)" /></p>

<p><input type="button" value="Limpar Tudo" onclick="limparTudo()" /></p>

1

Pode recuperar os elementos desse grupo pelo atributo name usando document#getElementsByName():

function limparPeloNome(nome) {
  var radios = document.getElementsByName(nome);
  for (var i = 0; i < radios.length; i++)
    radios[i].checked = false;
}

document.getElementById('bt-letra').addEventListener('click', function() {
  limparPeloNome('letras');
});
<input type='radio' name='letras' />A
<input type='radio' name='letras' />B
<input type='radio' name='letras' />C
<button id='bt-letra'>Limpar seleção</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .