tag - cómo configurar la opción de radio verificada onload con jQuery

meta tags jquery

Question

¿Cómo configurar la opción de radio verificada onload con jQuery?

Es necesario verificar si no se ha establecido un valor predeterminado y luego establecer un valor predeterminado

Answer 1

¿Qué tal un trazador de líneas?

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

Answer 2

// Si lo estás haciendo en javascript o en un framework como backbone, encontrarás mucho esto, 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.

Answer 3

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

Answer 4

Creo que puedes asumir que ese nombre es único y que 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"]);
}

Answer 5

Digamos que tienes botones de radio como estos, por ejemplo:

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

Y usted quiso verificar el que tiene un valor de carga "Masculina" si no se verifica la radio:

$(function() {
    var $radios = $(''input:radio[name=gender]'');
    if($radios.is('':checked'') === false) {
        $radios.filter(''[value=Male]'').prop(''checked'', true);
    }
});

Answer 6

Esto causará un error de form.reset ():

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

Pero este funciona:

$(''input:radio[name=gender][value=Male]'').click();

Answer 7

JQuery tiene dos formas de establecer el estado seleccionado 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 atributo de valor:

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

Si no tienen atributo de valor:

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

Más detalles

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

Si no está utilizando el atributo de valor para la radio, deberá utilizar una ID única para seleccionar una radio en particular en el grupo. En este caso, debe usar la función prop para establecer la propiedad "verificada". Muchas personas no usan el atributo de valor con las casillas de verificación, por lo que el # 2 es más aplicable a las casillas de verificación que a las 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 casillas de verificación.

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

Answer 8

Me gustó la respuesta por @Amc. Descubrí que la expresión podría condensarse aún más para no usar una llamada de filtro () (aparentemente, @chaiko también se dio cuenta de esto). Además, prop () es el camino a seguir vs attr () para jQuery v1.6 +, consulte la api.jquery.com/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''>

La actualización de una sola línea podría leer algo como:

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

Answer 9

No necesito todo eso. Con HTML simple y antiguo puedes lograr lo que quieres. Si dejas que la radio que quieres verifique por defecto de esta manera:
<input type=''radio'' name=''gender'' checked=''true'' value=''Male''>
Cuando se carga la página, vendrá revisado.

Answer 10

Si desea que sea verdaderamente dinámico y seleccione la radio que corresponda a los datos entrantes, esto funciona. Está utilizando el valor de género de los datos pasados ​​o utiliza 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);
};

Answer 11

Y si desea pasar un valor de su modelo y desea seleccionar un botón de opción del grupo en carga en función del valor, entonces 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>

Answer 12

De esta forma Jquery obtiene solo el elemento revisado

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

Answer 13

Solución JS nativa:

 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

Answer 14

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

});

Así que $(''input[name="myRadio"]'').val() no devuelve el valor comprobado de la entrada de radio, como es de esperar: devuelve el valor del primer botón de opción.

Answer 15

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