En jQuery, ¿cómo selecciono un elemento por su atributo de nombre?

328

Tengo 3 botones de radio en mi página web, como 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 radio seleccionado cuando se hace clic en cualquiera de estos tres. En jQuery tenemos selectores id (#) y class (.), Pero ¿qué pasa si quiero encontrar un botón de opción por su nombre, como se muestra a continuación?

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

Por favor, dime cómo resolver este problema.

Prasante
fuente
55
no es necesario que especifique estrictamente el atributo 'for', siempre que los campos estén incluidos entre sus correspondientes etiquetas 'label'
Lucius
2
jQuery 1.8 y superior cambia esto ... Agregué una respuesta a continuación explicando.
Kevin LaBranche
3
La respuesta de A1rPun es la mejor: ¡una línea que no es jQuery!
Rudey
1
Usé un botón de radio para mantener el estado en mi aplicación js. Depurado durante una buena hora antes de comprobar este hilo. Mira esto
Prasanth
En claro JS:document.querySelectorAll("input:radio[name=theme]").forEach(function() { this.onclick=function() { var value = this.value; }; });
mplungjan

Respuestas:

339

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

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

También debo tener en cuenta que tiene varias ID idénticas en ese fragmento. Este es HTML no válido. Use clases para agrupar un conjunto de elementos, no ID, ya que deberían ser únicos.

Paolo Bergantino
fuente
44
@gargantaun: si hace clic en un botón de radio, ¿qué le sucede?
Paolo Bergantino
11
Buen punto. Aunque todavía no es "¿Cómo obtener el valor del botón de radio seleccionado usando su nombre en jQuery?". Es "¿Cómo obtener el valor del botón de radio seleccionado al hacer clic en él usando jQuery?". Una pequeña diferencia, pero que me desconcertó un poco.
gigantesco
1
Según la pregunta, esta respuesta es correcta. En una visión global, buscamos la respuesta de Clayton.
Krish
8
A partir del uso de jQuery 1.8 en [type='radio']lugar de :radioesa forma, jQuery puede aprovechar el aumento de rendimiento proporcionado por el querySelectorAll()método DOM nativo .
Adam
2
La respuesta de @PaoloBergantino es 100% correcta porque devuelve el valor después de hacer clic en el botón de radio deseado. @ La respuesta de Clayton Rabenda no da esto.
Azam Alvi el
185

Para determinar qué botón de radio está marcado, intente 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 del grupo y el valor del botón seleccionado se colocará en val.

Actualización: Después de publicar, decidí que la respuesta de Paolo anterior es mejor, ya que usa un recorrido DOM menos. Estoy dejando que esta respuesta se mantenga, ya que muestra cómo obtener el elemento seleccionado de una manera que sea compatible con todos los navegadores.

jeff.mitchel
fuente
3
Base don cómo LEÍ la pregunta, esta fue la respuesta que necesitaba. : marcado es lo que me faltaba en mi ecuación. Gracias.
HPWD
99
A partir del uso de jQuery 1.8 en [type='radio']lugar de :radioesa forma, jQuery puede aprovechar el aumento de rendimiento proporcionado por el querySelectorAll()método DOM nativo .
Adam
Le di un espacio después de dos puntos y antes de "comprobar" por error. Así que asegúrese de que no haya espacio.
Mono fumador
Una respuesta útil para aquellos que no desean obtener el valor de un controlador de eventos de clic. De lo contrario, debe utilizar :checkedpara encontrar qué botón está marcado, por ejemplo, con un controlador de eventos de envío de formulario donde la thispalabra clave no se asigna al botón en el que se hizo clic.
che-azeh
155
$('input:radio[name=theme]:checked').val();
Arrendajo
fuente
Continué simplemente con $("input[name=theme]:checked").val();(dejando la :radioparte afuera y parece funcionar bien en IE, FF, Safari y Chrome. Tuve que trabajar con jQ v 1.3 ... Por supuesto, eso significa que solo hay un elemento llamado 'tema'
morespace54
2
Esta es la mejor respuesta de la OMI, dice "dame el valor de la radio COMPROBADA con ESTE nombre". No hay necesidad de eventos, etc.
ProVega
39

de otra manera

$('input:radio[name=theme]').filter(":checked").val()
h0mayun
fuente
1
Este es útil si está interesado en obtener el valor +1
swapnesh
Esto es sólido porque puede usar una variable para mantener los botones de radio, por ejemplo, $themeRadios = $('input:radio[name=theme'])para configurar cualquier controlador de eventos y luego obtener el valor utilizando el filtro, por ejemplo $themeRadios.filter(":checked").val().
Joshua Pinter el
Amo esta solución
Abel
20

Esto funciona muy bien para mi. Por ejemplo, tiene dos botones de opción con el mismo "nombre" y solo desea obtener el valor del marcado. Puedes probar este.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();
wdonayredroid
fuente
La razón por la que esta respuesta es mejor que la respuesta más de 230 votos actualmente aceptada es porque esta respuesta también explica cuando el usuario interactúa con un botón de radio por teclado.
gmeben
16

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

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

Gracias Adnan

Muhammad Adnan
fuente
hmm ... ¿no arreglé el formato de tu código en tu última respuesta? Por favor
cuídalo
13

Encontré esta pregunta cuando estaba investigando un error después de actualizar de 1.7.2 de jQuery a 1.8.2. Estoy agregando mi respuesta porque ha habido un cambio en jQuery 1.8 y superior que cambia cómo se responde esta pregunta ahora.

Con jQuery 1.8 han desaprobado los pseudo-selectores como: radio,: casilla de verificación,: texto.

Para hacer lo anterior ahora solo reemplace el :radiocon [type=radio].

Entonces su respuesta ahora es para todas las versiones de jQuery 1.8 y superiores:

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

Puede leer sobre el cambio en el archivo Léame 1.8 y el boleto específico para este cambio , así como comprender por qué en la página del selector de radio en la sección Información adicional.

Kevin LaBranche
fuente
55
: marcado no está en desuso. Para que pueda usar$("input[type='radio'][name='theme']:checked")
Adam
12

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

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

jsfiddle

Para obtener una descripción general del rendimiento de las respuestas actuales, consulte aquí

A1rPun
fuente
1
Gracias por esta respuesta Porque no pude obtener la respuesta aceptada para trabajar de ninguna forma.
Chris Holmes
9

Si desea conocer el valor del botón de opción predeterminado seleccionado antes de un evento de clic, intente esto:

alert ($ ("entrada: radio: marcado"). val ());
lhoess
fuente
6

Puede usar la función de filtro si tiene más de un grupo de radio en la página, como se muestra a continuación

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

Aquí está la URL del violín

http://jsfiddle.net/h6ye7/67/

Muhammad Salman
fuente
4
<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>
kartheek
fuente
4

Si desea un valor verdadero / falso, use esto:

  $("input:radio[name=theme]").is(":checked")
gls123
fuente
3

¿Algo así quizás?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

Cuando haces clic en cualquier botón de radio, creo que terminará seleccionado, por lo que se llamará al botón de radio seleccionado.

tschaible
fuente
1
El @ no es válido a partir de jQuery 1.3 (desaprobado antes de eso, incluso). blog.jquery.com/2009/01/05/help-test-jquery-13-beta-2 "Antiguos, XPath, selectores de atributos de estilo: [@ attr = value]. Estos han quedado en desuso durante bastante tiempo, y nosotros finalmente los está eliminando. Para solucionarlo, simplemente elimine el @! "
racerror
3

Si tiene más de un grupo de botones de radio en la misma página, también puede probar esto para obtener el valor del botón de radio:

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

¡Salud!

ahmed
fuente
2

también puede usar una clase CSS para definir el rango de botones de radio y luego usar lo siguiente para determinar el valor

$('.radio_check:checked').val()
Daniel Fernandes
fuente
1

Esto funcionó para mí ...

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Jquery:

    $ (". radioClass"). each (function () {
        if ($ (this) .is (': marcado'))
        alert ($ (this) .val ());
    });

Espero eso ayude..

Ravi M
fuente
0
$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});
azulado
fuente
0

Puede notar que usar el selector de clase para obtener el valor de los ASP.NET RadioButtoncontroles siempre está vacío y esta es la razón.

Puede crear el RadioButtoncontrol de la ASP.NETsiguiente manera:

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

Y ASP.NETrepresenta el siguiente HTML para suRadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

Porque ASP.NETno queremos usar el RadioButtonnombre o la identificación del control porque pueden cambiar por cualquier motivo fuera del alcance del usuario (cambio en el nombre del contenedor, nombre del formulario, nombre del control del usuario, ...) como puede ver en el código anterior.

La única forma posible de obtener el valor de RadioButtonusar jQuery es usar la clase css como se menciona en esta respuesta a una pregunta totalmente no relacionada como sigue

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
AaA
fuente