Cómo saber qué botón de radio está seleccionado con jQuery: guía completa

Por qué es importante y cómo no confundirse con los botones de radio

Imagina: estás creando un formulario de contacto, una encuesta o la configuración de un perfil. En todas partes donde el usuario debe elegir una opción entre varias, los radio buttons vienen al rescate. Pero cuando se trata de procesar la selección del lado del cliente, muchos principiantes (e incluso desarrolladores experimentados) tropiezan. La pregunta "How can I know which radio button is selected via jQuery?" es una de las más populares en Stack Overflow, y no es para menos: parece sencillo, pero hay suficientes matices.

En esta guía, analizaremos varias formas de obtener el valor del botón de radio seleccionado con jQuery. Aprenderás a evitar errores típicos, a mantener el código limpio y a adaptar las soluciones a diferentes escenarios. ¡Comencemos!

Estructura HTML básica para botones de radio

Antes de escribir jQuery, creemos un formulario simple con botones de radio. Supongamos que preguntamos al usuario sobre su lenguaje de programación favorito:

<form id="surveyForm">\n  <p>Tu lenguaje de programación favorito:</p>\n  <label>\n    <input type="radio" name="language" value="python"> Python\n  </label>\n  <label>\n    <input type="radio" name="language" value="javascript"> JavaScript\n  </label>\n  <label>\n    <input type="radio" name="language" value="java"> Java\n  </label>\n  <br><br>\n  <button type="button" id="getResult">Saber elección</button>\n</form>

Observa: todos los botones de radio tienen el mismo atributo name="language". Esto es lo que los agrupa: solo se puede seleccionar una opción. Si tuvieran nombres diferentes, serían grupos independientes.

Método n.º 1: Selector jQuery :checked — el clásico del género

La forma más directa y utilizada es aplicar el selector :checked. Este encuentra todos los elementos del formulario que están marcados (seleccionados). Combinado con .val(), obtenemos el valor al instante:

$('#getResult').on('click', function() {\n  var selectedValue = $('input[name="language"]:checked').val();\n  if (selectedValue) {\n    alert('Has seleccionado: ' + selectedValue);\n  } else {\n    alert('¡Nada seleccionado!');\n  }\n});

¿Qué sucede aquí?

\n
• $('input[name="language"]:checked') — buscamos entre todos los input con nombre "language" solo aquellos que están marcados (con un punto o check).
\n
• .val() — obtenemos el atributo value del elemento encontrado.
\n
• La comprobación if (selectedValue) — si no hay nada seleccionado, .val() devolverá undefined, y mostraremos una advertencia.
\n

Este método es ideal cuando tienes un solo grupo de botones de radio y necesitas obtener el valor de uno de ellos.

Método n.º 2: Usar .filter() y .is() para mayor flexibilidad

A veces no quieres depender solo de :checked o necesitas realizar acciones adicionales con el elemento seleccionado. Aquí son útiles los métodos .filter() y .is():

$('#getResult').on('click', function() {\n  var selected = $('input[name="language"]').filter(':checked');\n  if (selected.length > 0) {\n    console.log('Elemento seleccionado:', selected);\n    var value = selected.val();\n    var id = selected.attr('id');\n    alert('Valor: ' + value + ', ID: ' + (id || 'ninguno'));\n  } else {\n    alert('Por favor, selecciona un lenguaje.');\n  }\n});

El método .filter(':checked') filtra solo los elementos marcados de la colección. Y .is(':checked') se puede usar para verificar un elemento específico:

// Verificamos si Python está seleccionado\nif ($('input[value="python"]').is(':checked')) {\n  console.log('¡Python es una excelente elección!');\n}

Este enfoque es útil cuando no solo necesitas obtener el valor, sino también manipular