1

Tengo el siguiente codigo para generar un grupo de radiobutton:

<?php
include_once 'conexiones/conexion.php'; 

function obtenerIdTipoCompartido() {
GLOBAL $conexion;

try 
{
    $consulta=$conexion->prepare("SELECT idTipoCompartido, descripcionTipoCompartido FROM tipo_compartidos");
    $consulta->execute(); 
    $resultados=$consulta->setFetchMode(PDO::FETCH_ASSOC);
    foreach ($consulta->fetchAll() as $key => $value) {
        $idTipoCompartido= $value["idTipoCompartido"];
        $descripcionTipoCompartido= $value["descripcionTipoCompartido"];
        echo "<input type=
        'radio' 
        id='idTipoCompartido' 
        name='idTipoCompartido' 
        value=".$idTipoCompartido."
        onchange='compartirOpciones();'>".$descripcionTipoCompartido;

    }
}
catch (PDOExcepcion $e) 
{
    echo "Error".$e->getMessage();
}
}
?>

Quisiera mostrar el valor que tiene (1,2,3,4) mediante un evento onclick. Tengo el siguiente archivo JS:

function compartirOpciones () {
var opcion = document.getElementById("idTipoCompartido");
var areaCompartir = document.getElementById("areaCompartir");
alert (opcion);

switch (opcion) {

case 1: 
alert ("1");
if (opcion.checked) {
  var valor= document.getElementById('idTipoCompartido').value;
  alert(valor);
}

break;

case 2:
alert ("2");
break;

case 3:
alert ("3");
break;

case 4:
alert ("4");
break;

}
}

Pero me muestra unicamente 1,1,1,1, ¿Cómo puedo solucionarlo?

MALA MIA: en lo posible utilizar Javascript puro.

Código que uso actualmente:

function compartirOpciones(elemento){
  var valor= elemento.value;
  var id = elemento.id;

  switch(valor) {

      case 1:
      alert(valor);
      alert(id);
      break;

      case 2:
       alert(valor);
      alert(id);
          break;

      case 3:
       alert(valor);
      alert(id);

      break;

      case 4:
       alert(valor);
      alert(id);
       break;

      default:
  }

}

No muestra el valor o el id

2
  • Porque les asignas a todos el mismo id manualmente aquí: ... echo "<input type= 'radio' id='idTipoCompartido' ...
    – A. Cedano
    Commented el 31 may. 2017 a las 17:45
  • @A.Cedano , eso queria ver como cambiarlo, no recordaba cual de los dos campos (id , name) debe ser el mismo para que interectactuen como grupo
    – Dev 200
    Commented el 31 may. 2017 a las 18:03

2 respuestas 2

2

A. Con Javascript puro

Usando Javascript puro puedes obtener el valor de cualquiera de los radio seleccionados usando solo la etiqueta name que será la misma para todos. La función mostrada escucha los cambios de todos los radios incluidos en el formulario cuyo id es myForm.

Es una forma sencilla de hacerlo, sin tener que estar agregando el evento onchange() a todos los radios, y sin tener que agregarles id, a no ser que necesites por algún motivo identificarlos de forma unívoca.

 var radios = document.forms["myForm"].elements["myRadio"];
      for(var i = 0, max = radios.length; i < max; i++) {
          radios[i].onclick = function() {
               alert(this.value);
      }
 }
 <form id="myForm">
      <input type="radio" name="myRadio" value="1" >1</input>
      <input type="radio" name="myRadio" value="2" >2</input>
      <input type="radio" name="myRadio" value="3" >3</input>
 </form>

B. Con jQuery

Para obtener el valor del radio seleccionado.

Suponiendo que los radio tienen en la etiqueta name el valor radioName y que se encuentran en un formulario cuyo id es myForm, puedes hacerlo simplemente así:

$('input[name=radioName]:checked', '#myForm').val()

$('#myForm input').on('change', function() {
  alert($('input[name=radioName]:checked', '#myForm').val());
});
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Si no tienes un formulario, puedes asignar el listener al elemento <body> del DOM.

Ejemplo:

$('body').on("change", "input[name='radioName']", function() {
  var $value= $("input[name='radioName']:checked").val();
  alert($value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />

4
  • EL menos uno tampoco es mio :)
    – Dev 200
    Commented el 31 may. 2017 a las 18:06
  • Creo que lo primero que hare, sera cambiar los IDs para que cada uno se llame asi idTipo1, idTipo2, idTipo3
    – Dev 200
    Commented el 31 may. 2017 a las 18:16
  • @Victor-Random He agregado una solución usando JS puro. Gracias.
    – A. Cedano
    Commented el 31 may. 2017 a las 18:21
  • @Victor-Random si lo que quieres es sólo recuperar el valor del radio seleccionado, el id sobra. Como muestro en la respuesta A, usando Javascript puro puedes obtener el valor de cualquiera de los radio seleccionados usando solo la etiqueta name que será la misma para todos. La función escucha los cambios de todos los radios incluidos en el formulario myForm.
    – A. Cedano
    Commented el 31 may. 2017 a las 18:28
1

Dos puntualizaciones:

  • La primera, es que nunca más de un elemento en el código HTML debería de usar el mismo ID ya que va a generar problemas. Si quieres que varios elementos tengan unos estilos concretos puedes usar clases en su lugar.

  • Lo segundo, es que cuando tu haces clic sobre un elemento de la página puedes utilizar la palabra reservada this para hacer referencia al elemento que acabas de clickar y pasárselo a la función como parámetro.

Por lo tanto, no necesitarías utilizar mucho código para mostrar el valor que tiene cada radio button, simplemente pasar la referencia del elemento al que le estás haciendo clic como parámetro de la función y sacar su valor por pantalla.

Un pequeño ejemplo para que veas su funcionamiento:

function compartirOpciones(elemento){
  alert(elemento.value);
}
<form>
  <input type="radio" value="1" name="idTipoCompartido" onchange='compartirOpciones(this)'>
  <input type="radio" value="2" name="idTipoCompartido" onchange='compartirOpciones(this)'>
</form>

UPDATE

Si quieres usar un switch como el de tu ejemplo tendrías que poner comillas "" a cada uno de tus case ya que value devuelve un valor de tipo texto.

Ejemplo:

switch(valor){
    case "1":
       //Tu código
       break; 
    case "2":
       ....
}
11
  • Como puedo generar algo asi: idTipoCompartido+phpvariable
    – Dev 200
    Commented el 31 may. 2017 a las 18:20
  • @Victor-Random puedes obtener el valor usando sólo la etiqueta name de los radio por lo que la etiqueta id si sólo los quieres para eso, no hace falta. Como verás en la respuesta, tampoco tienes que agregar el evento onchange a todossss los radio. Revisa mi respuesta editada la parte A.
    – A. Cedano
    Commented el 31 may. 2017 a las 18:23
  • @Victor-Random ¿Que variable quieres sacar exactamente? Si lo que quieres es crear un id diferente para cada uno de los radiobutton podrías hacer id='idTipoCompartido".$idTipoCompartido."' a la hora de generar los radiobutton. Commented el 31 may. 2017 a las 18:26
  • 1
    Lo puse directo, ya que PHP permite reconocer las variables dentro de los string con comillas dobles :), si lo pongo como me dices no carga la varaible dentro del iD
    – Dev 200
    Commented el 31 may. 2017 a las 18:30
  • 1
    @Victor-Random Tienes razón. Fallo mío. Bien visto :) Commented el 31 may. 2017 a las 18:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.