javascript - selectores - getelementbyid value

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

Question

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

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

Por favor, dime cómo resolver este problema.

Answer 1

Algo como esto tal vez?

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

Cuando haga clic en cualquier botón de opción, creo que terminará seleccionado, por lo que se llamará para el botón de opción seleccionado.

Answer 2

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

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

Gracias Adnan

Answer 3

Encontré esta pregunta porque 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 la forma en que se responde a 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 :radio con [type=radio] .

Entonces, tu 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 readme 1.8 y el ticket específico para este cambio , así como comprender por qué en la página de selección de radio en la sección Información adicional.

Answer 4

Esto debería hacerlo, todo esto está en la documentation , que tiene un ejemplo muy similar a este:

$("input: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 código HTML no es válido. Use clases para agrupar un conjunto de elementos, no ID, ya que deben ser únicos.

Answer 5

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('':checked'')) alert($(this).val()); });

Espero eso ayude..

Answer 6

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

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

Answer 7

Para cualquier persona 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í

Answer 8

Para determinar qué botón de opción 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 es mejor, ya que usa un recorrido DOM menos. Estoy dejando que la respuesta sea válida, ya que muestra cómo obtener el elemento seleccionado de una manera que sea compatible con todos los navegadores.

Answer 9

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

Puede crear el control RadioButton en ASP.NET siguiente 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.NET reproduce el siguiente HTML para su RadioButton

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

Para ASP.NET , no queremos usar el nombre o la identificación del control RadioButton porque pueden cambiar por cualquier motivo fuera de la mano del usuario (cambio en el nombre del contenedor, nombre del formulario, nombre del control de usuario, ...) como se puede ver en el código anterior .

La única forma viable que queda de obtener el valor del RadioButton mediante jQuery es usar la clase css como se menciona en this respuesta a una pregunta totalmente no relacionada, como sigue:

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

Answer 10

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á url de violín

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

Answer 11

Si desea saber el valor del botón de opción seleccionado por defecto antes de un evento de clic, intente esto:

alert($("input:radio:checked").val());

Answer 12

Si quieres un valor verdadero / falso, usa esto:

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

Answer 13

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

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

¡Aclamaciones!

Answer 14

También puede usar una clase CSS para definir el rango de botones de opción y luego usar lo siguiente para determinar el valor

$(''.radio_check:checked'').val()

Answer 15

de otra manera

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

Answer 16

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

Answer 17

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

Answer 18

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