Establecer radio seleccionada del grupo de radio con un valor

153

¿Por qué estoy luchando con esto?

Tengo un valor: 5

¿Cómo verifico el botón de radio del grupo "mygroup" con el valor de 5?

$("input[name=mygroup]").val(5); // doesn't work?
dcolumbus
fuente

Respuestas:

351

Con la ayuda del selector de atributos , puede seleccionar el elemento de entrada con el valor correspondiente. Luego debe establecer el atributo explícitamente, utilizando .attr:

var value = 5;
$("input[name=mygroup][value=" + value + "]").attr('checked', 'checked');

Desde jQuery 1.6, también puede usar el .propmétodo con un valor booleano (este debería ser el método preferido):

$("input[name=mygroup][value=" + value + "]").prop('checked', true);

Recuerde que primero debe eliminar el atributo marcado de cualquiera de los botones de radio en un grupo de botones de radio, luego podrá agregar la propiedad / atributo marcado a uno de los botones de radio en ese grupo de botones de radio.

Código para eliminar el atributo marcado de todos los botones de radio de un grupo de botones de radio:

$('[name="radioSelectionName"]').removeAttr('checked');
Felix Kling
fuente
.prop ('marcado', verdadero) es probablemente mejor o .is ()
bladefist
3
@bladefist: .isno ayudaría aquí, pero estoy de acuerdo .prop. No estaba disponible en ese entonces;) Actualizará mi respuesta. ¡Gracias!
Felix Kling
44
Si el valor del botón de opción tiene un decimal, debe poner el valor entre comillas
Robert
1
@Robert: Sí, probablemente. De la documentación : "Puede ser una sola palabra sin comillas o una cadena entre comillas".
Felix Kling
55
Ver la respuesta de Jonathan. Los documentos de jQuery muestran que .val()admite la configuración de valores en grupos de radio o casillas de verificación. Esta respuesta funciona técnicamente, pero es indirecta y mucho menos legible / memorable.
jinglesthula
144

Hay una mejor manera de verificar radios y casillas de verificación; tienes que pasar una matriz de valores al método val en lugar de un valor bruto

Nota: Si simplemente pasa el valor por sí mismo (sin estar dentro de una matriz ), eso dará como resultado que todos los valores de "mygroup" se establezcan en el valor.

$("input[name=mygroup]").val([5]);

Aquí está el documento de jQuery que explica cómo funciona: http://api.jquery.com/val/#val-value

Y .val([...])también trabaja con elementos de formulario como <input type="checkbox">, <input type="radio">y <option>que está dentro de un <select>.

Las entradas y las opciones que tengan un valor que coincida con uno de los elementos de la matriz serán verificadas o seleccionadas, mientras que las que tengan un valor que no coincida con uno de los elementos de la matriz serán desmarcadas o no seleccionadas

Fiddle que demuestra este funcionamiento: https://jsfiddle.net/92nekvp3/

Jonathan Pasquier
fuente
Respuesta aceptada (bueno, debería ser). A partir de jQuery 1.0, consulte el último ejemplo de documentos (desplácese hacia abajo): api.jquery.com/val Copiado aquí: jsfiddle.net/JoePC/w1f9ykso
JoePC
Esta es una manera agradable y consistente de establecer todos los valores de entrada. Lástima que me haya llevado 6 años aprenderlo.
Jeff Lowery
1
Pasé bastante tiempo tratando de averiguar por qué todos mis valores en el grupo se estaban configurando al valor pasado en lugar de verificar el valor. Resulta que pasé el valor por sí mismo, no dentro de una matriz.
OXiGEN
14

Prueba esto:

$('input:radio[name="mygroup"][value="5"]').attr('checked',true);

Demostración de JS Fiddle .

David dice reinstalar a Mónica
fuente
1
@ Hunter, gracias ... claramente hoy no es mi día para jQuery ... = /
David dice que reinstale a Monica el
8
$("input[name='mygroup'][value='5']").attr("checked", true);
cazador
fuente
7

Cuando cambia el valor del atributo como se mencionó anteriormente, el changeevento no se activa, por lo que si es necesario por alguna razón, puede activarlo de esta manera

$('input[name=video_radio][value="' + r.data.video_radio + '"]')
       .prop('checked', true)
       .trigger('change');
Jean-Marc Amon
fuente
1

O simplemente puede escribirle un atributo de valor:

$(':radio[value=<yourvalue>]').attr('checked',true);

Esto funciona para mi.

Ketan
fuente
0
var key = "Name_radio";
var val = "value_radio";
var rdo = $('*[name="' + key + '"]');
if (rdo.attr('type') == "radio") {
 $.each(rdo, function (keyT, valT){
   if ((valT.value == $.trim(val)) && ($.trim(val) != '') && ($.trim(val) != null))

   {
     $('*[name="' + key + '"][value="' + (val) + '"]').prop('checked', true);
   }
  })
}
Amin Fathi
fuente
44
¿Puede explicar qué hace su código en su respuesta? Al menos una oración más o menos. Y cómo resuelve la solución. Gracias.
Alex
0

Versión de JavaScript puro:

document.querySelector('input[name="myradio"][value="5"]').checked = true;
JukkaV
fuente
-1
$('input[name="mygroup"]').val([5])
Anjitha
fuente
1
¿Puede explicar qué hace que su solución sea diferente de las otras soluciones ya proporcionadas?
Giovani Vercauteren
@Giovani Vercauteren, debemos dar el nombre como una cadena. Entonces doy mygroup como una cadena en el código.
Anjitha