Obtener el valor de un radio button con jQuery

En este post voy a repasar cómo obtener el valor de un radio button con jQuery, seleccionar y/o checkear un radio button, comprobar si un radio button está seleccionado y resetearlo.

Otros post con temática similar son:

• Obtener el valor de un checkbox con jQuery
• Obtener el valor de un select (option) con jQuery
• jQuery each(): Recorrer elementos de un mismo tipo

Sintaxis HTML de un input radio button

<input type="radio" name="edad" id="edad" value="20">

Tal y como vemos en el código superior el input radio button se compone de:

1. type: Tipo de elemento input del formulario.
2. name: Nombre del input.
3. id: Identificador único del input.
4. value: Valor que tiene el elemento por defecto.

Si necesitamos tener varios radio button agrupados y que solo se pueda seleccionar uno sería así:

<input type="radio" name="edad" id="edad" value="20">
<input type="radio" name="edad" id="edad2" value="25">

Obtener el valor (value) del radio button con jQuery click()

En esta primera demo voy a realizar un ejemplo para obtener el valor de un radio button con jQuery click(). Os pongo el código del formulario:

<form name="formulario" id="formulario" action="12-radio-button-jquery.php" method="POST">
 <input type="radio" name="edad" id="edad1" value="20"> 20<br>
 <input type="radio" name="edad" id="edad2" value="30"> 30<br>
 <input type="radio" name="edad" id="edad3" value="40"> 40 
 <br><br>
 <input type="button" id="boton" value="Enviar">
</form>

El formulario consta de 3 radio button agrupados con el name ‘edad’ y el botón para enviarlo. Una vez pulsado el botón obtendremos el valor del radio button con la función jQuery click().

Y el script en jQuery es el siguiente, lo podemos colocar en el head:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function()
  {
  $("#boton").click(function () {  
   alert($('input:radio[name=edad]:checked').val());
   $("#formulario").submit();
   });
   });
</script>

En el código superior cuando se hace click en el botón con id ‘boton’ sacamos un alert con el valor del radio button seleccionado con name ‘edad’, el valor lo obtenemos usando la función jQuery val().

Acto seguido se envía el formulario con method POST y sacamos por pantalla con PHP el valor seleccionado.

<?php 
 if ($_POST['edad'])
 echo "la edad recibida es: " .$_POST['edad'];
?>

Obtener el valor de un radio button cuando se selecciona con jQuery

Otra manera similar a la anterior es obtener el valor del radio button cuando se haga click en él. Aquí os pongo su código.

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("input[name=edad]").click(function () {    
        alert("La edad seleccionada es: " + $('input:radio[name=edad]:checked').val());
        alert("La edad seleccionada es: " + $(this).val());
    });
});
</script>

Usando el mismo formulario podemos ver funcionando el ejemplo en esta segunda demo:

• Controlamos con jQuery click en un input de name ‘edad’ y se saca un alert con su valor.
• Os he puesto 2 ejemplos que muestran el valor del radio button clickado usando la función jQuery val().

Comprobar si un radio button está seleccionado con jQuery

Vamos a ver otro caso que se nos puede dar, con el mismo formulario anterior he creado este nuevo ejemplo para comprobar si un radio button está seleccionado.

Os muestro el código:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function()
  {
  $("#boton").click(function () {  
   if( $("#formulario input[name='edad']:radio").is(':checked')) {  
    alert("Bien!!!, la edad seleccionada es: " + $('input:radio[name=edad]:checked').val());
    $("#formulario").submit();  
    } else{  
     alert("Selecciona la edad por favor!!!");  
     }  
  });
  });
</script>

Explicación de las líneas superiores:.

• Al hacer click en el botón compruebo si hay algún input de tipo ‘radio’ con nombre (name) ‘edad’ seleccionado.
• En caso afirmativo muestro por pantalla el valor (jQuery val()) y envio el formulario.
• En caso contrario muestro un mensaje pidiendo que se seleccione la edad.

Cómo seleccionar un radio button con jQuery

Otra acción que podemos hacer es la de seleccionar a nuestro antojo uno de los radio button. He realizado un nuevo  ejemplo para seleccionar un radio button con jQuery.

Habría que sustituir los radio button existentes en nuestro formulario por estos 3 nuevos:

<input type="button" id="boton1" value="Seleccionar 20"> 
<input type="button" id="boton2" value="Seleccionar 30"> 
<input type="button" id="boton3" value="Seleccionar 40">

El código jQuery sería el siguiente:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function()
  {
  $("#boton1").click(function () {
                    $("#edad1").attr('checked', true);
   });

  $("#boton2").click(function () {  
   $("#edad2").attr('checked', true);
   });

  $("#boton3").click(function () {  
   $("#edad3").attr('checked', true);
   });
   });
</script>

El código superior es muy sencillo, simplemente selecciono el radio button con el id correspondiente.

Obtener el valor de un radio button con jquery change()

Otra manera de obtener el valor es mediante el método jQuery change(). Este método se ejecuta cuando el elemento cambia de valor.

Aquí tenéis el código de este nuevo ejemplo para obtener el valor del radio button con jQuery Change().

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function()
  {
  $("input[name=edad]").change(function () {  
   alert($(this).val());
   });

   });
</script>

Tal y como se aprecia en el ejemplo, cuando el input de name ‘edad’ cambia de valor sacamos por pantalla el valor seleccionado con un alert y la función jQuery val().

Cómo resetear un radio button con jQuery

Para finalizar os pongo el código para resetear el radio button, solo os queda asociarlo al click de un button como en las anteriores demos:

$('input:radio[name=edad]').attr('checked',false);

Evitar conflictos con otras librerías

En caso de trabajar con otras librerías distintas a jQuery os recomiendo en caso de problemas usar jQuery noConflict().

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

• jQuery selectors: Cómo seleccionar o controlar elementos del DOM