How to create a function to clear the group of a radiobutton?

Asked

Viewed 444 times

2

I am working on a typing system of a paper form, where I have some options of radiobutton, for example:

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

The case is that eventually a typist clicks "unintentionally" on a radio to answer a form question, however, the question is blank on paper, and it would be necessary to undo the selection.

The standard behavior of group of radiobutton is to be able to change between options and not to de-select the field.

Nor could it be a Clear Form function, because the typist would have to re-type all the other fields.

Any ideas? Has anyone ever had the same problem? How to give a reset in the group "energy", for example?

html form radiobutton
  • 3

    You can put an example of HTML to better understand the structure?

  • Thanks @Sergio, really the question got clearer. Anyway I’ve had good answers too. Abs

2 answers

1


I believe you just want to clear the selection of a only question, then I created a method by passing the parameter of which question is and then concateno to search only the radio belonging to that question.

Example: Question 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

You can retrieve the elements of this group by the attribute name using 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>

Browser other questions tagged html form radiobutton

You are not signed in. Login or sign up in order to post.