Obtener el valor de la selección de un grupo de radiobuttons con Prototype

Suponendo que se tiene el siguiente formulario se requiere determinar cual es el valor seleccionado en el grupo de radiobuttons utilizando las facilidades que ofrece Prototype.

<form id='formulario'>
    <b>Código</b> <input type='radio' id='opc1' name='opciones' value='vCodigo' />
    <b>Nombre</b> <input type='radio' id='opc2' name='opciones' value='vNombre' />
    <b>Documento</b> <input type='radio' id='opc3' name='opciones' value='vDocumento' />
</form>

Desafortunadamente no es posible realizar lo siguiente ya que el radiobuttongroup no es una entidad como tal sino un agrupamiento de las mismas, mas aún, no se referencia por su id sino por su name, motivo por el cual no funcionará con el getElementById.

resultado = $('opciones').value;

Por suerte Prototype es muy flexible y encontré dos soluciones diferentes para este problema que me parecieron muy interesantes, ambas en una sola instrucción compuesta.

La primera utiliza la búsqueda por selector para obtener los radiobuttons del documento que se encuentren seleccionados y que pertenezcan al radiobuttongroup elegido para posteriormente utilizar el método pluck para extraerle su atributo value.

resultado = $$('input:checked[type="radio"][name="opciones"]').pluck('value');

La segunda optiene los radiobuttons de un radiobuttongroup específico accediendo directamente al formulario que los contiene para posteriormente utilizar el método find que retornará al primer elemento encontrado y que se encuentre seleccionado.

resultado = $('formulario').getInputs('radio','opciones').find(function(radio) { return radio.checked; }).value;

Enlaces.

2 thoughts on “Obtener el valor de la selección de un grupo de radiobuttons con Prototype”

  1. Probé el código para el navegador FireFox y Iceweasel y no funciona, si sabes como hacerlo, lo agradería

    Muchas gracias de antemano

    1. Saludos Mildred. Incluíste la librería Prototype en tu prueba del código ?

      Debes preferiblemente descargar tu propia versión de Prototype (http://prototypejs.org/) e incluír la siguiente línea en el de tu página web adaptando su respectiva ruta.

      Lo acabo de probar nuevamente con Firefox 3.5.2 bajo Linux y me funciona sin problemas.

Leave a Reply

Your email address will not be published. Required fields are marked *