Búsqueda de sitios web

javascript - En jQuery, ¿cómo selecciono un elemento por su atributo name?

Tengo 3 botones de radio en mi página web, como se muestra a continuación:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

En jQuery, quiero obtener el valor del botón de opción seleccionado cuando se haga clic en cualquiera de estos tres. En jQuery tenemos selectores de id (#) y de clase (.), pero ¿qué pasa si quiero encontrar un botón de opción por su nombre, como se muestra abajo?

$("<radiobutton name attribute>").click(function(){});

Por favor, dime cómo resolver este problema.

Respuesta #1

Esto debería bastar, todo esto está en la documentación, que tiene un ejemplo muy similar a este:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

También debo señalar que tienes múltiples IDs idénticos en ese fragmento. Esto no es HTML válido. Usa clases para agrupar conjuntos de elementos, no IDs, ya que deben ser únicos.

Respuesta #2

Para determinar qué botón de opción está seleccionado, intenta esto:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

El evento se capturará para todos los botones de radio en el grupo y el valor del botón seleccionado se colocará en val.

Actualización: Después de publicar decidí que la respuesta de Paolo arriba es mejor, ya que utiliza una traversa del DOM menos. Estoy dejando esta respuesta porque muestra cómo obtener el elemento seleccionado de una manera compatible con diferentes navegadores.

Respuesta #3

$('input:radio[name=theme]:checked').val();

Respuesta #4

otra manera

$('input:radio[name=theme]').filter(":checked").val()

Respuesta #5

Esto me funciona muy bien. Por ejemplo, tienes dos botones de opción con el mismo "nombre", y solo querías obtener el valor del que está seleccionado. Puedes probar con este.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

Respuesta #6

El siguiente código se utiliza para obtener el valor del botón de opción seleccionado por nombre

jQuery("input:radio[name=theme]:checked").val();

Gracias Adnan

Respuesta #7

Para cualquiera que no quiera incluir una biblioteca para hacer algo realmente simple:

document.querySelector('[name="theme"]:checked').value;

jsfiddle

Para un resumen del rendimiento de las respuestas actuales revísalo aquí

Respuesta #8

Encontré esta pregunta mientras investigaba un error después de actualizar de la versión 1.7.2 de jQuery a la 1.8.2. Estoy agregando mi respuesta porque ha habido un cambio en jQuery 1.8 y versiones superiores que ahora cambia cómo se responde a esta pregunta.

Con jQuery 1.8 han desaprobado los pseudo-selectores como :radio, :checkbox, :text.

Para hacer lo anterior ahora solo reemplaza el :radio con [type=radio].

Así que tu respuesta ahora se convierte para todas las versiones de jQuery 1.8 y superiores:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
});

Puedes leer sobre el cambio en el archivo readme 1.8 y en el ticket específico para este cambio, así como entender por qué en la página del selector :radio bajo la sección de Información Adicional.

Artículos relacionados