entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Seleccionar automáticamente un radio button tras hacer click en un button

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?

3 Respuestas

3votos

dairon Puntos17140

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

0voto

beatriz comentado

Muchas gracias por responder tan rápido. Sin embargo, tu respuesta no me ha quedado muy clara. He intentado seguir tus instrucciones, pero me he perdido a mitad de camino. Esto es lo que he conseguido hacer, que evidentemente no funciona porque me habré equivocado en casi todo. Espero puedas seguir ayudándome cuando tengas tiempo.

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

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

<script>
function selectRadio(){
if (document.getElementById("b.100")){
document.getElementById("r.100").value=='checked';
}
if (document.getElementById("b.200")){
document.getElementById("r.200").value=='checked';
}
if (document.getElementById("b.300")){
document.getElementById("r.300").value=='checked';
}
}
</script>

0voto

white comentado

selectRadio debe recibir un parametro, almenos asi lo tenias pensado no? selectRadio(this.id)

entonces tu funcion selectRadio debe tener un parametro, llamemoslo id

en esta linea:

if (document.getElementById("b.100")){
document.getElementById("r.100").value=='checked';
}

lo que hace es ver si existe un elemento con id b.100 y definir el atributo value del elemento con id "r.100" a "checked", lo cual no seleccionaria el input radio, lo correcto es definir la propiedad checked a un booleano, true | false.

intenta así:

function selectRadio(id){
    var checkboxes = {
        'b.100' : 'r.100',
        'b.200' : 'r.200',
        'b.300' : 'r.300'
    };

    if( document.getElementById(checkboxes[id]) )
    {
        document.getElementById(checkboxes[id]).checked= true;
    }
}

http://www.w3schools.com/jsref/prop_radio_checked.asp
http://www.desarrolloweb.com/articulos/1006.php

saludos!

0voto

white Puntos75880

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/

0voto

dairon comentado

@white eso es JQuery no seas tan duro que está empezando ahora :) ahora fue que vine a tener internet, ahora me pongo a implementar lo que le decía.
Saludos Dairon

0voto

white comentado

en realidad es javascript sin el uso de ninguna librería, solo use querySelectorAll que es similar al selector de Jquery

https://developer.mozilla.org/es/docs/Web/API/Element/querySelectorAll
https://gist.github.com/chitsaou/3066411

aunque se ve algo complicado de un principio, es solo el uso de una funcion mas.

0voto

dairon comentado

interesante @white le echaré un vistaso para aprender más pues JS tiene todo un futuro :)

4votos

Leonardo-Tadei Puntos227320

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!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta