Seleccionar automáticamente un radio button tras hacer click en un button
Estoy realizando una web con joomla y tengo una duda sobre programación (tengo algunos conocimientos sobre php y javascript, pero son escasos). El caso es que yo tengo tres botones y luego tengo un radio button con 3 opciones. Lo que quiero hacer es que cuando se seleccione (se haga click) en cada uno de los botones, se seleccione automáticamente el radio button que corresponda con ese botón.
Había pensado en crear un script con javascript usando la estructura if y getElementsByName para seleccionar el botón, pero no logro que me funcione.
¿Cómo puedo conseguir que al hacer click en un botón se selecione una opción del radio button?
1 respuesta
Con jQuery puedes hacer esto fácilmente.
Para empezar hacemos que los botones tengan un data que usaremos para identificar el radiobutton que debemos marcar y poder asignarles un evento al hacer click:
<button data-radio-value="1">1</button> <button data-radio-value="2">2</button> <button data-radio-value="3">3</button>
Como ves, en el data-radio-value he puesto el valor del radiobutton que se debe marcar al hacer click en el botón:
<input type="radio" name="radio-grupo" value="1"> <input type="radio" name="radio-grupo" value="2"> <input type="radio" name="radio-grupo" value="3">
Para que esto ocurra escribimos un sencillo script en javascript usando jQuery:
$('button[data-radio-value]').click(function (e) {
var radioValue = $(e.target).data("radio-value");
$('input[value="'+radioValue+'"]').prop("checked", true);
});Basicamente indicamos que cualquier botón que tenga el atributo data-radio-value, al hacer click, obtener el valor del atributo data-radio-value del botón pulsado y buscamos un radio cuyo valor sea el indicado en el data del botón. A dicho radio button le cambiamos la propiedad checked a true.
Aquí tienes un ejemplo en funcionamiento:
