Question

Buenos días
Estoy realizando una web con joomla y tengo una duda sobre programación (tengo algunos conocimientos sobre php y javascript, pero son escasos). Estoy haciendo un formulario y en él 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.

Pongo un ejemplo a ver si consigo que quede más clara mi pregunta:
Tengo estos tres botones

<button name="Boton1" value="100">Elegir</button>
<button name="Boton2" value="200">Elegir</button>
<button name="Boton3" value="300">Elegir</button>

Luego tengo este Radio Button

<input type="radio" name="Radio1" value="100">89.99</input>
<input type="radio" name="Radio2" value="200">189.99</input>
<input type="radio" name="Radio3" value="300">289.99</input>

Pues bien, lo que quiero es que el Boton1 seleccione el Radio1, el Botón2 el Radio2 y el Boton3 el Radio3

Se que tal vez es una pregunta algo simple, pero estoy empezando y hay cosas que no tengo claras ¿Podrían ayudarme con esto?

Answer 1

Es más sencillo de programar si los diferencias por id en vez de por value y por name. es decir cada boton su id sería id="b.100", id="b.200" y el radio seria id="r.100" id="r.200" entonces con le haces una llamada en cada boton a la funcion onclic que llama a una funcion seleccioname(this) donde por this ira el boton donde se hizo clic luego cojes el id de ese boton lo partes a la mitad en el .(punto) y cojes el segundo elemento del array que seria el valor y entonces selecccion el radio que su id sea el que "r."+id_cojido y entonces a ese radio le alteras el atributo que lo hace ser marcado no me acuerdo si erá checked y ya ta. hay otras formas más sencillas pero está es una sencilla la cual te enseñará muchas cosas de javascript.
Disculpa por no ponerte la implementación pero me tengo que ir, justamente haora estaba cerrando la computadora. espero que te sirva.
Saludos Dairon.

Código
Disculpa que me aya demorado pero ahora fue que pude tener de nuevo internet. aquí está el código que te mencionaba aunque realmente el id de los radio puede ser solamente el numero sin la r:

 <button id="b.100" onclick="seleccion(this.id)">Elegir</button>
    <button id="b.200" onclick="seleccion(this.id)">Elegir</button>
    <button id="b.300" onclick="seleccion(this.id)">Elegir</button>

    <input type="radio" value="100" id="100">
    <input type="radio" value="100" id="200">
    <input type="radio" value="100" id="300">

    <script>
        function seleccion(boton){
            var cadena = boton.split("."); 
/*aquí convierte el string en un array de dos elementos 0 y 1 en el Array la posición 0 es 'b' y la posicion 1 es 'el id' o podrias simplemente hacerlo sin la letra pero me gusta con la letra porque en un futuro en un sencillo id puede poner varios valores unidos con un simbolo y luego usarlos de esta forma ;) */
            if (document.getElementById(cadena[1]).checked == true) { 
//validas si está marcado y en caso de estarlo lo desmarcas
                document.getElementById(cadena[1]).checked = false;
            }else{
                document.getElementById(cadena[1]).checked = true; 
//en caso de estar desmarcado lo marcas
            }           
        }
    </script>

Espero que ahora si te sirva. Te recomiendo ir aprendiendo primero la lógica y sus tipos de datos y operaciones.
Saludos Dairon

Answer 2

Como bien te dice @dairon, es mejor si los agrupas por algun atributo.

te dejo un ejemplo con javascript:

---

código html:

<div>
    <button name="Boton1" data-group="1" value="100">Elegir</button>
    <button name="Boton2" data-group="2" value="200">Elegir</button>
    <button name="Boton3" data-group="3" value="300">Elegir</button>
    <input type="radio" data-group="1" name="Radio1" value="100">89.99</input>
    <input type="radio" data-group="2" name="Radio2" value="200">189.99</input>
    <input type="radio" data-group="3" name="Radio3" value="300">289.99</input>
</div>

código javascript:

var items = document.querySelectorAll('[data-group]'),
    checkboxes = {};

[].forEach.call(items, function (item) {

    if( item.nodeName.toLowerCase() != 'button' )
    {
        checkboxes[item.getAttribute('data-group')] = item;
        return;
    }

    item.addEventListener('click', function (e) {

        for( var x in checkboxes )
        {
            checkboxes[x].checked = false;
        }

        checkboxes[this.getAttribute('data-group')].checked = true;
    });
});

puedes verlo trabajando en Jsfiddle: http://jsfiddle.net/ogys1axn/

Answer 3

Hola @beatriz,

las respuestas de Dairón y de White son ambas correctas, pero para estos casos, yo siempre prefiero usar un enfoque más simple:

<button id="b.100" onclick="selectRadio('r.100')">Elegir</button>
<button id="b.200" onclick="selectRadio('r.200')">Elegir</button>
<button id="b.300" onclick="selectRadio('r.300')">Elegir</button>

<input type="radio" value="100" id="r.100" name="r">
<input type="radio" value="100" id="r.200" name="r">
<input type="radio" value="100" id="r.300" name="r">

<script>
function selectRadio(r){
    document.getElementById(r).checked = true;;
}
</script>

Lo que hago es que la función selectRadio(r) reciba como parámetor el radio a seleccionar... al ser una sola línea de código, incluso se podría poner como parte del evento:

<button id="b.100" onclick="document.getElementById(r.100).checked = true;">Elegir</button>

aunque queda un poco más "sucio".

También agregué el atributo name a los radio, ya los chequeos de esta forma se excluyen mutuamente, lo que es la idea del control radio. Para múltiples chequeos simultánemos es recomendable el checkbox en lugar el radio.

Saludos cordiales!