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

¿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

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

¿Qué tal un trazador de líneas?

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

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

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

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

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"]);
}

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

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

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>

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.

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

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

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.

De esta forma Jquery obtiene solo el elemento marcado

$('input[name="radioInline"]:checked').val()

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

Esto funciona para múltiples botones de radio

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