Cómo iterar en un RadioNodeList en Javascript

Tengo una serie de elementos de radio en un formulario. He accedido a ellos mediante Javascript para poder trabajar dinámicamente.

El HTML es el siguiente:

<form id="formulario">
  <input type="radio" name="elementoradio" id="elementoradio1" disabled checked> <label for="elementoradio1">Opción 1</label>
  <br>
  <input type="radio" name="elementoradio" id="elementoradio2" disabled> <label for="elementoradio2">Opción 2</label>
  <br>
  <input type="radio" name="elementoradio" id="elementoradio3" disabled> <label for="elementoradio3">Opción 3</label>
</form>

Luego accedo a ellos mediante el objeto formulario y el nombre de la propiedad de los elementos radio.

<script>
  let formulario = document.getElementById('formulario');
  let elementosRadio = formulario['elementoradio'];
  console.log(elementosRadio);
</script>

Cuando muestro los elementos de radio me dice que son un RadioNodeList(3).

Qusiera iterar por ellos para hacer tratamientos con Javascript con cada uno. ¿Cómo puedo hacer esto?

Editar

Responder la pregunta

Alba

355 9 25 13

Respuestas

Los elementos del tipo "NodeList" son iterables en Javascript, por lo que no necesitas hacer nada en especial, más que usar el recorrido forEach sobre el conjunto de radios. "RadioNodeList" no deja de ser un "NodeList", así que lo puedes iterar de la misma manera.

Por ejemplo podrías iterar así:

let formulario = document.getElementById('formulario');
let elementosRadio = formulario['elementoradio'];
elementosRadio.forEach(elemento => console.log(elemento));

También puedes acceder al listado de radios directamente por su nombre con una sola sentencia:

let radios = document.getElementsByName('nombre_conjunto_radiobutton');

También puedes hacer un recorrido con un bucle for de toda la vida:

let radios = document.getElementsByName('nombre_conjunto_radiobutton'); 
for (let i = 0; i < radios.length; i++) {
  console.log(`Elemento ${i}: ${radios[i].id}`);
}

Incluso puedes usar un bucle for...of:

let radios = document.getElementsByName('nombre_conjunto_radiobutton'); 
for (let radio of radios) {
  console.log(radio);
}

María

187 4 17 10

Aportar una respuesta