[SOLUCIONADO] Marcar RADIO pulsando "cerca"

[borjamoll]

Buenos dias,
tengo un formulario, con un monton de radio buttons en una tabla.
El problema es que hay que meter muchos datos, y acertar en el redondel del radio, cuando tienes que marcar muchas casillas, es un poco engorroso.

Mediante javascript, se puede indicar que marque el radio, si se hace click en su celda de la tabla?
He buscado por internet pero no encuentro nada parecido... no se si el problema es que no se explciarme mejor.

El codigo del formulario es a grandes rasgos este:

echo "<tr><td>$nombre $apellidos"</td>";
echo "<td class=center><input type='radio' name=trabajador[$['id'] value='tb' ></td>";
echo "<td class=center><input type='radio' name=trabajador[$'id'] value='dl'></td>";
echo "<td class=center><input type='radio' name=trabajador[$id'] value='va'></td>";
echo "<td class=center><input type='radio' name=trabajador[$id'] value='bj' ></td>";
echo "<td class=center><input type='radio' name=trabajador[$id'] value='oh'></td>";
echo "<td class=center><input type='radio' name=trabajador[$id'] value='sc' ></td>";
echo "<td class=center><input type='radio' name=trabajador[$id'] value='pe' ></td>";
echo "</tr>";

Como veis, cada radio esta en un "td"... quisiera que cuando hagan click en la celda, se marque ese radio button.... pero no se cómo hacerlo...

Gracias por adelantado.

[Alexis88]

Bienvenido a FDW.

Sí es posible. Una de las maneras de hacerlo es delegando una función a cada celda cuando se dé un clic en ellas, en donde tomarás al radiobutton que contiene y verificarás si está marcado o no para así marcarlo o desmarcarlo mediante la propiedad checked.

Por ejemplo:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    [].forEach.call(document.querySelectorAll("table td"), function(td){
        td.addEventListener("click", function(){
            var radio = this.querySelector("[type=radio]");
            if (radio.checked){
                radio.checked = false;
            }
            else{
                radio.checked = true;
            }
        }, false);
    });
}, false);
 

Una vez que hayan cargado los elementos del documento, recorremos al conjunto de celdas de la tabla presente en el mismo. En cada iteración, delegamos una función a cada celda para cuando se dé un clic en cada una de ellas. En dicha función, tomo al elemento de tipo "radio" que posee y verifico si está marcado; de ser así, lo desmarco, caso contrario, lo marco.

Esa verificación (la condición) también puede ir en una sola línea utilizando operadores ternarios:

Código Javascript:

radio.checked = radio.checked ? false : true;
 

Saludos

[borjamoll]

Madre mia!!! PERFECTO!
Es exactamente lo que estaba buscando!

Yo te lo agradezco... pero mis usuarios MUCHISSIMO MAS!!!

Gracias!!!

[Alexis88]

Como una mejora, incluye una condición más:

Código Javascript:

if (radio){
    if (radio.checked){
        radio.checked = false;
    }
    else{
        radio.checked = true;
    }
}
 

Como no todas las celdas de la tabla contendrán radiobuttons, primero verificamos que se haya logrado obtener a uno en la línea anterior (en donde asignamos el radiobutton a la variable radio) y solo si este existe, verificamos si está marcado o no.

NOTA: Esta nueva condición debe de ir en reemplazo de la anterior.

Saludos