Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

Sintaxis HTML de un input radio button

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í:

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:

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:

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.

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.

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:

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:

El código jQuery sería el siguiente:

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().

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:

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:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies