Cómo saber cual Radio Button está seleccionado con javascript

Esta mañana estaba programando algo para una aplicación web en la que trabajo en mi actual empleo, y de repente me encuentro con que debo hacer una suma con respecto a unos radio buttons (para los que no saben son los botones esos redondos que cuando los seleccionas aparece un punto negro en el centro) cada uno tenía un valor y tenía que sumarlo con los valores de los radio buttons de otros conjuntos.Después de buscar en google no hallé una solución definitiva, así que en base a lo poco que encontré y a la documentación de w3schools desarrollé mi propio script que te devuelve el radiobutton que ha sido seleccionado, así que lo comparto con cualquiera que programe en javascript, dando inicio a las publicaciones sobre programación web que espero poder hacer de vez en cuando en este blog, bien el script es sencillo, esta es la función

 
function obtenerRadioSeleccionado(formulario, nombre){
     elementos = document.getElementById(formulario).elements;
     longitud = document.getElementById(formulario).length;
     for (var i = 0; i < longitud; i++){
         if(elementos[i].name == nombre && elementos[i].type == "radio" && elementos[i].checked == true){
             return elementos[i];
         }
     }
     return false;
} 

Los parámetros son: formulario, que el nombre del formulario que vamos a trabajar (especificado en su atributo id), y nombre, que indica el atributo name de los radio buttons que queremos verificar, como bien se sabe, para crear un grupo de radio buttons, sólo basta colocarle el mismo atributo name a todos los radio buttons queramos incluir en dicho grupo.

Explico el funcionamiento, primero obtenemos el formulario con getElementbyId y referenciamos a su atributo elements, que no es más que un arreglo en donde están todos los elementos del formulario (cajas de texto, botones, etc..) obviamente cada elemento, al igual que el formulario son objetos, el tipo de objeto del formulario se llama Form, en el enlace pueden ver sus atributos y métodos y con cuales navegadores son compatibles los mismos, bien, una vez que obtenemos el arreglo de los elementos, tenemos que saber cuanto elementos tenemos en dicho arreglo, por lo que copiamos esto del atributo lenght del objeto Form.

elementos = document.getElementById(formulario).elements;
longitud = document.getElementById(formulario).length;

Un tip de eficiencia, tal vez puedan pensar que uno se ahorra un par de variables si en vez de hacer esas asignaciones simplemente llamas a la función cuando quieras acceder a la longitud o al arreglo de elementos, pues no, cada vez que llamas a getElementById estás accediendo y recorriendo el árbol DOM, por lo que son ciclos extras de cpu, también considerando que hablamos de código script el cual es interpretado y no compilado, sin embargo, este tipo de cosas pueden aplicar para programas compilados para alguna plataforma específica, como programas en c++ o java, si se fijan detenidamente, en el ciclo de abajo se accede a la variable longitud, si sustituimos esto por getElementById(formulario) el algoritmo tarda en ejecutarse n*t, donde n es la longitud del arreglo de elementos y t es el tiempo que tarda en ejecutarse getElementById, sin embargo como el DOM es una estructura de árbol, tampoco es tan significativo (por supuesto, debemos tratar de estructurar el esqueleto de nuestro html lo más óptimo posible, esto también mejor la velocidad a la que el navegador la carga), pero mientras más complejos sean nuestros scripts más tiempo se tarda, y la idea es que hasta las computadoras un poco obsoletas puedan tener algo de fluidez en la interacción con nuestro sitio.En cambio accediendo a longitud en vez de la función simplemente hace n ciclos y más nada, todo sacrificando algo de espacio en nuestra memoria (lo cual es menos significativo).

Bien, seguimos explicando la función, recorremos el arreglo verificando tres cosas:

  1. El nombre del radio button, esto garantiza que estamos trabajando sobre el grupo de radio buttons que queremos. Esto sería elementos[i].name == nombre, obviamente elemento[i] es el elemento dentro del formulario que estamos evaluando.
  2. ¿Realmente estamos tratando con un radio button? Pues para cubrirnos las espaldas es recomendable verificar esto, es muy recomendable validar todo lo que sea posible, para evitar fallas en nuestras aplicaciones. Esta condición es verificado con el atributo type, no lo había mencionado, pero el radio button es un objeto input, así que podríamos estar tratando con un campo de texto si no verificamos esta condición. El condicional es elementos[i].type == “radio”
  3. Y por último verificamos la condición más importante, a lo que vinimos ¿Está seleccionado? esto es simplemente evaluar el atributo checked con elementos[i].checked == true colocarle la igualda con respecto a true es un poco redundante, pero tampoco hace daño, es opcional, podemos colocar simplemente elementos[i].checked.

Si estas tres condiciones se cumplen entonces retornamos el elemento que estamos evaluando, es decir elementos[i].

if(elementos[i].name == nombre && elementos[i].type == "radio" && elementos[i].checked == true){
     returnelementos[i];
}

Tip de optimización de código, si te fijas coloco el return dentro del if el cual está dentro del ciclo for ¿Por qué hago esto en vez de guardarlo en una variabley retornarlo al final? La respuesta es que al hacer el retorno la función no sigue ejecutándose, sino que que detiene y retorna, por lo tanto, detiene al ciclo for, lo cual es necesario porque ya conseguimos lo que buscamos, simplemente lo retornamos y ya, en muchos lenguajes de programación debes colocar un retorno que no esté dentro de un condicional, así que desde mi punto de vista es buena práctica dejar algo que retornemos por defecto en caso de que no se cumpla los condicionales dentro del cuerpo de la función, y lo ponemos al final, así como hago yo en este script, retorno falso, en este caso nos sirve de utilidad, nos permite saber si no está ningun radio button seleccionado, lo cual podemos usar para decirle al usuario que debe seleccionar una opción.

Sin embargo yo recomiendo que siempre a uno de los radio buttons colocarle el atributo checked=”checked” y así nos evitamos problemas y ahorramos tiempo en validaciones.

¿Cómo podemos usar la función?

Podemos llamarla de la siguiente manera:
radio = obtenerRadioSeleccionado(“nuestroFormulario”, “grupoRadios”);

Ahora podemos trabajar en el objeto radio, para información sobre que atributos y métodos tiene sólo dale click al enlace.

Eso es todo por ahora, espero que se haya entendido la explicación, espero sus comentarios.

Be Sociable, Share!