Como obtener el nombre de un radio al clikear una imagen

[pippin]

Hola expertos de la Web ahora me surge una necesidad que no he podido resolver, explico:

tengo un for que me genera unos radio button

Código: [Seleccionar]

for($i=0; $i<5; $i++){
echo "<input type='radio' name='$i' />";
}

Ahora tengo una imagen

Código: [Seleccionar]

<img src="imagen.jpg" id="imagen" />

Lo que necesito es que al dar clic en la imagen se guarde en una variable el nombre del radio seleccionado que como ven es un numer, intente con jQuery pero no encuentro la forma de apuntarle al radio.

Los radio estan fuera de cualquier formulario por eso pienso es un poco mas complicado

Espero puedan ayudarme gracias.

[JaiMe]

Primero, registras un event handler al evento click de imagen, luego encontras el input radio seleccionado.

Código: [Seleccionar]

$('#imagen').click(function(){
    var radio_seleccionado = $('#formularioID input[name=nombreRadio]:checked').val();
    // ....
});
Los elementos input del tipo radio son agrupados por el atributo name, mas aqui. En otras palabras deben tener el mismo nombre, lo que queres guardar es el valor de dicho radio.

Tu PHP entonces quedaria asi

Código: [Seleccionar]

for($i=0; $i<5; $i++){
    echo "<input type='radio' name='nombreRadio' value=" . $i ."/>";
}

[JaiMe]

"sería más simple hacer toda esa parte en JavaScript"

~ ... Yo no se que definicion de 'simple' tenes en tu mente. Veo tu respuesta y literalmente hago un facepalm mientras exclamo al todo poderoso señor de los cielos, por que ~ siempre tiene que venir a querer dar catedra?

Para empezar, cuando creas los radios, a todos les estas asignando el mismo ID. Se supone que el attributo ID debe ser unico. Ademas, el agregar elementos directamente al DOM adentro de un loop no es recomendable en terminos de performance. Una mejor solución es esta - la cual al crear 500 elementos radio toma la mitad de tiempo que tu version.

Código: [Seleccionar]

       var radio = document.createElement('input');
           radio.type = 'radio';
           radio.name = 'nombreRadio';
       var tempd = document.createElement("div");
       for(var x = 0; x < 5; x++){
         var nr = radio.cloneNode(false);
             nr.value = x;
         tempd.appendChild(nr);
       }
       document.getElementById('test-form').appendChild(tempd);

mas aqui: https://gist.github.com/1359466

Tu funcion ValorRadio, esta bien.

Pero tu funcion MostrarDatosRadio, a pesar de ser un solo relajo, esta incorrecta. En la screenshot radio 4 chequeado debe ser true.



Esta es facil de solucionar, yo usaria un loop en lugar de lo que estas haciendo.

----

OP: quedate con jQuery. No es tan pesada y obtenes el beneficio de una capa de abstraccion que te evita tener que lidear con crossbrowser issues. A menos que estuvieras creando un sitio con millares de visitas y quisieras ahorrar ancho de banda, no veo ninguna razon por la cual no usar jQuery.

[pippin]

Bueno agradesco sus comentarios sugerencias y respuestas, lo he resuelto de esta manera:

Codigo PHP que generar los radios (bueno no solo los radios es un conjunto de registros)

Código: [Seleccionar]

for($i=0; $i<5, $i++){
echo "<input type='radio' name='radio_editar' value='$i' />";
}

Las funciones jQuery

Código: [Seleccionar]

function obtenerRadioSeleccionado(){
                elementos = document.getElementsByName("radio_editar");
                for (var i = 0; i < elementos.length; i++){
                    if(elementos[i].name == "radio_editar" && elementos[i].type == "radio" && elementos[i].checked == true){
                        return $(elementos[i]).val();
                    }
                }
                return false;
            }
           
            $('#img_editar').live('click', function(){
                var id = obtenerRadioSeleccionado();
                if(id == false){
                    alert("Seleccione un registro de la lista");
                }else{
                    alert(id);
                }
            });

La imagen

Código: [Seleccionar]

<img src="icon-editar.png" id="img_editar" />

Y asi todo funciona perfectamente, sin necesidad de que los radios esten dentro den un formularios.

[JaiMe]

Unas cuantas observaciones:

Y esto va para la gente que quiere escribir codigo mas profesional

* Siempre agreguen el keyword var a las variables. Hay bastantes efectos negativos cuando esto no se hace.
* Al usar jQuery, en lugar de usar la funcion del DOM getElementsByName, aprendan a usar los selectores, este es una de las ventajas de usar la libreria

Por ejemplo, la funcion obtenerRadioSeleccionado de pippin, se puede expresar de manera mas simple en muchisimo menos lineas

Código: [Seleccionar]

$('#img_editar').live('click', function(){
alert( $('input[name=radio_editar]:checked').val() || "Seleccione un registro de la lista" );
});
El selector de jQuery simplifica la manipulacion del DOM grandemente y no es necesario escribir un for loop y checkear por los atributos que queremos. Los selectores quizas asustan a varios, pero en realidad son simples. De-construyendo el selector podemos observar sus diferentes componentes

Código: [Seleccionar]

  'input[name=radio_editar]:checked'
     ^          ^               ^
  elemento  [atributo=valor]    filtro, para *filtrar* resultados del query

Ahora, cuando ningun radio esta checked, el selector regresara un objeto jQuery vacio, consecuentemente el resultado del metodo val() sera undefined

Código: [Seleccionar]

$('input[name=radio_editar]:checked').val()  //   undefined

Undefined es el valor por default de todas las variables que no han sido inicializadas. Este valor se evalua a falso. El operador OR || en JavaScript es bastante expresivo, cuando lo ocupamos asi

Código: [Seleccionar]

A || B
Si A es falso, el operador regresa B
Si A es verdadero, el operador regresa A

Por lo tanto cuando ningun radio ha sido seleccionado, podemos alert "Nada" con la siguiente linea.

Código: [Seleccionar]

alert('input[name=radio_editar]:checked').val() || "Nada");

El usar jQuery no te hace un novato cuando la usas bien y sabes que es lo que esta pasando detrás de las escenas. Mi recomendación para todos los desarrolladores web serios es aprender a usarla como dios manda.

[pippin]

Gracias JaiMe por tu aporte, menos lineas de codigo esto es muy bueno.