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

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.

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.

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.

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

de otra manera

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

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

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

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.

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í

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

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/

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

Si desea un valor verdadero / falso, use esto:

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

¿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.

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!

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

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

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

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();
});