Get the value of a radio type button with Vanilla Javascript?

Question

How to select a radio button using pure JS and pick the value set by the user?

Follow my HTML code:

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="cadastro" id="professorCadastro" value="professor">
    <label class="form-check-label" for="professorCadastro">Professor</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="cadastro" id="alunoCadastro" value="aluno">
    <label class="form-check-label" for="alunoCadastro">Aluno</label>
</div>
<div class="form-check form-check-inline">
     <input class="form-check-input" type="radio" name="cadastro" id="empresaCadastro" value="empresa" disabled>
     <label class="form-check-label" for="empresaCadastro">Empresa</label>
</div>

Follow me JS so far

let tipoCadastro = document.getElementsByName('cadastro')

Answer 1

The function getElementsByName return a NodeList, which is like an array of elements with that name. This makes you have to access the first one at the position 0 or alternatively use a loop/loop to traverse the various elements and do something with them.

Assuming you only have one element with that name, you can access the value with:

let valor = document.getElementsByName('cadastro')[0].value;
//                                                 ^ ---- primeiro

However, if you already have id in the element, simplify and use getElementById, that the same no longer happens, as it only catches one element, since the id must be unique.

Answer 2

To catch the value of a collection of radio button, you can create an event click for each and pick up its respective value by clicking on it:

// pego todos os radios com name=cadastro
var radios = document.querySelectorAll("input[type='radio'][name='cadastro']");
for(var x=0; x<radios.length; x++){
   radios[x].addEventListener("click", function(){
      var valor = this.value;
      console.log(valor);
   });
}

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="cadastro" id="professorCadastro" value="professor">
    <label class="form-check-label" for="professorCadastro">Professor</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="cadastro" id="alunoCadastro" value="aluno">
    <label class="form-check-label" for="alunoCadastro">Aluno</label>
</div>
<div class="form-check form-check-inline">
     <input class="form-check-input" type="radio" name="cadastro" id="empresaCadastro" value="empresa" disabled>
     <label class="form-check-label" for="empresaCadastro">Empresa</label>
</div>