Línea de Código
Aprende a Programar

Junto con getElementById, posiblemente getElementsByName sea uno de los métodos más utilizados para manipular un árbol DOM dentro de JavaScript. El método getElementsByName nos permite el acceder una lista de elementos, los cuales tengan el nombre pasado por parámetro.

Aquí nos preguntaremos acerca de que elementos dentro de una página web pueden tener el mismo nombre. Ya que hay que recordar que los ID son únicos y por lo tanto hacen referencia a un único elemento. La verdad es que, por poder, podemos tener los elementos que queramos: capas, botones, formularios,… Si bien, un ejemplo de uso podría ser una lista de checkbox. Podemos tener un conjunto de elementos seleccionables, con diferente ID, pero con el mismo nombre. Esto nos permitirá acceder a dicha lista.

Es por ello que lo primero que vamos a hacer es crear la lista de checkbox:

Es importante apreciar que el nombre (atributo name) que le hemos puesto a los checkbox es el mismo, ‘opcion1’.

Lo siguiente que vamos a hacer es crear un método getElementById que acceda a los elementos ‘opcion1’ mediante el método .getElemementsByName. Este método necesitará que le pasemos como parámetro el valor que hayamos dado al atributo name.

var elementos = document.getElementsByName("opcion1");

El método getElementsByName devuelve un array de NodeList con los elementos que cumplen la condición. Es por ello que deberemos de recorrer el array para acceder a los elementos y su valor. Todo el código de nuestro método quedará de la siguiente forma:

Ahora solo nos quedará lanzar este método en algún sitio. Por ejemplo, en un botón:

Valores de los checkbox

Publicaciones relacionadas:

Campos obligatorios en JavaScript Obtener el titulo de la página con JavaScript Generar un documento HTML mediante JavaScript Crear eventos con JavaScript Añadir la página a favoritos