Cómo configurar la opción de radio marcada al cargar con jQuery

297

¿Cómo configurar la opción de radio marcada al cargar con jQuery?

Es necesario verificar si no se establece ningún valor predeterminado y luego establecer uno predeterminado

Phill Pafford
fuente
1
@ryenus ¿no sería la otra pregunta un duplicado de la mía ya que hice la mía antes de la otra pregunta?
Phill Pafford

Respuestas:

559

Digamos que tenía botones de radio como estos, por ejemplo:

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

Y quería marcar el que tiene un valor de carga "macho" si no se marca ninguna radio:

$(function() {
    var $radios = $('input:radio[name=gender]');
    if($radios.is(':checked') === false) {
        $radios.filter('[value=Male]').prop('checked', true);
    }
});
Paolo Bergantino
fuente
Simplemente preguntándome a Paolo, IIRC, la especificación dice que el atributo verificado debe ser verificado = "verificado" (aunque puedo estar equivocado). ¿Se traduce jQuery verdadero a 'marcado' en este ejemplo? Simplemente curioso ...
alex
8
Mi ejemplo original tenía 'marcado', 'marcado', es una de esas cosas que nunca puedo recordar cuál es el correcto. jQuery lo resuelve de cualquier manera, pero sé que si desea establecer el atributo verificado real de un elemento DOM, se supone que es un booleano, como document.getElementById ('x'). check = true; - Así que fui con eso.
Paolo Bergantino
solo quiero agregar esta notación de corchetes [nombre = género] no funciona en el navegador de Windows Phone 7.
最 白 目
Acabo de probarlo con FF y jQuery 1.9.1 y .attr ('marcado', verdadero); no funciona, sin embargo .prop ('marcado', verdadero); hace. mira stackoverflow.com/questions/4618733/… (¿duplicado?)
IARI
Una rápida: NO use $radios.removeAttr('checked')antes del accesorio. Confundirá el navegador y los valores publicados.
igasparetto
110

¿Qué tal un trazador de líneas?

$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);
Andrew McCombe
fuente
Lo anterior es mejor ya que admite valores de nombre más complejos.
J. Martin
13
Esto no responde completamente la pregunta de operaciones: debe verificar si una opción predeterminada ya está marcada primero. También debería usar prop () en lugar de attr () para este tipo de cosas. Para obtener una explicación, consulte la sección "Atributos vs. Propiedades" aquí: api.jquery.com/prop . Además, no es necesario el filtro adicional, puede combinar los 2 selectores, por ejemplo, $ ("input [name = gender] [value = Male]"). Prop ("marcado", verdadero);
jackocnr
3
Esta solución funciona por primera vez que configuré la radio pero luego falla. Al usar "prop" en lugar de "attr", funciona perfectamente. Entonces: $ ('input: radio [name = "gender"]'). Filter ('[value = "Male"]'). Prop ('marcado', verdadero);
Andrew
2
Correcto - prop () es ahora el método recomendado para acceder a las propiedades.
Andrew McCombe
1
Más simple: $ ('input: radio [name = "gender"] [value = "Male"]'). Attr ('marcado', verdadero);
Régis
52

Este provocará un error en form.reset ():

$('input:radio[name=gender][value=Male]').attr('checked', true);

Pero este funciona:

$('input:radio[name=gender][value=Male]').click();
chaiko
fuente
55
Le recomendaría que use el disparador ('clic') un poco más legible y detenga una llamada al método
Barkermn01
35

JQuery tiene en realidad dos formas de establecer el estado marcado para la radio y las casillas de verificación y depende de si está utilizando el atributo de valor en el marcado HTML o no:

Si tienen un atributo de valor:

$("[name=myRadio]").val(["myValue"]);

Si no tienen un atributo de valor:

$("#myRadio1").prop("checked", true);

Más detalles

En el primer caso, especificamos todo el grupo de radio usando el nombre y le decimos a JQuery que busque la radio para seleccionar usando la función val. La función val toma una matriz de 1 elemento y encuentra la radio con un valor coincidente, establece su marcada = verdadero. Otros con el mismo nombre serían deseleccionados. Si no se encuentra ninguna radio con un valor coincidente, todas se desmarcarán. Si hay varias radios con el mismo nombre y valor, se seleccionará la última y otras se anularán.

Si no está utilizando el atributo de valor para la radio, entonces necesita usar una identificación única para seleccionar una radio particular en el grupo. En este caso, debe usar la función prop para establecer la propiedad "marcada". Muchas personas no usan el atributo de valor con casillas de verificación, por lo que el n. ° 2 es más aplicable para casillas de verificación que para radios. También tenga en cuenta que como las casillas de verificación no forman un grupo cuando tienen el mismo nombre, puede hacer$("[name=myCheckBox").prop("checked", true); para las casillas de verificación.

Puedes jugar con este código aquí: http://jsbin.com/OSULAtu/1/edit?html,output

Shital Shah
fuente
22

Me gustó la respuesta de @Amc. Encontré que la expresión podría condensarse aún más para no usar una llamada filter () (@chaiko aparentemente también notó esto). Además, prop () es el camino a seguir frente a attr () para jQuery v1.6 +, consulte la documentación de jQuery para prop () para conocer las mejores prácticas oficiales sobre el tema.

Considere las mismas etiquetas de entrada de la respuesta de @Paolo Bergantino.

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

El one-liner actualizado podría leer algo como:

$('input:radio[name="gender"][value="Male"]').prop('checked', true);
clayzermk1
fuente
15

Creo que puede suponer que ese nombre es único y todas las radios del grupo tienen el mismo nombre. Entonces puedes usar el soporte de jQuery así:

$("[name=gender]").val(["Male"]);

Nota: Pasar matriz es importante.

Versión condicionada:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}
Saram
fuente
1
Esto es malo al escanear cada elemento en busca de un valor que no recomiendo que se use nunca
Barkermn01
@ MartinBarker, ¿puede explicar qué hacen los hombres al 'escanear'?
Saram
Al buscar el DOM, si no usa nada más que un atributo, obliga a jQuery a pasar por todos los elementos del DOM y verifica que esa coincidencia sea la misma que si fuera a usarlo $("*"), así que debería usar un tipo en arrendamiento $("input")o una ID sea ​​ideal ya que el DOM tiene llamadas nativas para obtener un elemento por id
Barkermn01
@ MartinBarker - Estoy de acuerdo. Por lo general, prefiero el selector con la identificación del formulario o proporciono el parámetro de contexto. Actualmente, el escaneo de DOM no es un esfuerzo de jQuery sino un motor de navegador interno que document.querySelectorAllhace todo el trabajo.
Saram
Para abordar las inquietudes anteriores, use $("input[name=gender]")oo $("input[name=gender]:radio")(para navegadores modernos)$("input[name=gender][type=radio]")
David Balažic
7

Si desea que sea realmente dinámico y seleccione la radio que corresponde a los datos entrantes, esto funciona. Utiliza el valor de género de los datos pasados ​​o usa el valor predeterminado.

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};
WildSpidee
fuente
5

Solución nativa de JS:

 document.querySelector('input[name=gender][value=Female]').checked = true;

http://jsfiddle.net/jzQvH/75/

HTML:

<input type='radio' name='gender' value='Male'> Male
<input type='radio' name='gender' value='Female'>Female
Razan Paul
fuente
3

Y si desea pasar un valor de su modelo y desea seleccionar un botón de radio del grupo en carga según el valor, use:

Jquery:

var priority = Model.Priority; //coming for razor model in this case
var allInputIds = "#slider-vertical-" + itemIndex + " fieldset input";

$(allInputIds).val([priority]); //Select at start up

Y el html:

<div id="@("slider-vertical-"+Model.Id)">
 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("high-"+Model.Id)" value="1" checked="checked">
    <label for="@("high-"+Model.Id)" style="width:100px">@UIStrings.PriorityHighText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("medium-"+Model.Id)" value="2">
    <label for="@("medium-"+Model.Id)" style="width:100px">@UIStrings.PriorityMediumText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("low-"+Model.Id)" value="3">
    <label for="@("low-"+Model.Id)" style="width:100px">@UIStrings.PriorityLowText</label>
 </fieldset>
</div>
Iftikhar
fuente
2

No necesito todo eso. Con HTML simple y antiguo puedes lograr lo que quieres. Si deja que la radio que desea verifique de forma predeterminada de esta manera:
<input type='radio' name='gender' checked='true' value='Male'>
cuando se carga la página, aparecerá marcada.

Carlos Torres
fuente
3
Sí, pero necesito que sea dinámico ya que el sitio de referencia pasaría los valores predeterminados en la carga de la página. Ha pasado un tiempo desde que pensé en esta pregunta, así que espero entender lo que estás tratando de decir
Phill Pafford,
2
 $("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
novato a jquery
fuente
66
No publique respuestas de solo código. Por favor, dé una explicación también.
Lee Taylor
2

Aquí hay un ejemplo con los métodos anteriores:

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">    <legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice1">
    <label for="radio-choice-1">Cat</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice2">
    <label for="radio-choice-2">Dog</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice3">
    <label for="radio-choice-3">Hamster</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice4">
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

En javascript:

$("[name = 'radio-choice-2'][value='choice3']").prop('checked', true).checkboxradio('refresh');
karma
fuente
1

Tenga en cuenta este comportamiento al obtener valores de entrada de radio:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Por $('input[name="myRadio"]').val()lo tanto , no devuelve el valor verificado de la entrada de radio, como es de esperar, devuelve el valor del primer botón de radio.

Bradley Flood
fuente
1

De esta forma Jquery obtiene solo el elemento marcado

$('input[name="radioInline"]:checked').val()
Julian M
fuente
2
Debe describir su respuesta y formatear su código
Michael
0

// Si lo estás haciendo en javascript o en un framework como backbone, encontrarás esto mucho, podrías tener algo como esto

$MobileRadio = $( '#mobileUrlRadio' );

mientras

$MobileRadio.checked = true;

no trabajará,

$MobileRadio[0].checked = true;

será.

su selector puede ser como los otros chicos arriba recomendados también.

JrBriones
fuente
0

Esto funciona para múltiples botones de radio

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);
Hari Lakkakula
fuente