come impostare l'opzione radio selezionata al caricamento con jQuery

Come impostare l'opzione radio selezionata al caricamento con jQuery?

È necessario verificare se non è stato impostato alcun valore predefinito e quindi impostare un valore predefinito

Supponi di avere pulsanti di opzione come questi, ad esempio:

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

E volevi controllare quello con un valore di "Male" onload se nessuna radio è stata controllata:

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

Che ne dici di una fodera?

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

Questo causerà l'errore form.reset ():

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

Ma questo funziona:

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

JQuery ha in realtà due modi per impostare lo stato controllato per radio e caselle di controllo e dipende dal fatto che si stia usando o meno l'attributo value nel markup HTML:

Se hanno un attributo value:

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

Se non hanno un attributo value:

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

Più dettagli

Nel primo caso, specifichiamo l'intero gruppo radio usando il nome e diciamo a JQuery di trovare la radio da selezionare usando la funzione val. La funzione val accetta un array di 1 elemento e trova la radio con il valore corrispondente, imposta il segno di spunta = vero. Altri con lo stesso nome sarebbero stati deselezionati. Se non viene trovata alcuna radio con valore corrispondente, verrà deselezionato tutto. Se ci sono più radio con lo stesso nome e valore, l'ultimo sarebbe selezionato e gli altri sarebbero deselezionati.

Se non si utilizza l'attributo value per la radio, è necessario utilizzare un ID univoco per selezionare una radio particolare nel gruppo. In questo caso, è necessario utilizzare la funzione prop per impostare la proprietà "selezionata". Molte persone non usano l'attributo value con le caselle di controllo, quindi il numero 2 è più applicabile per le caselle di controllo rispetto alle radio. Inoltre, poiché le caselle di controllo non formano un gruppo quando hanno lo stesso nome, puoi farlo $("[name=myCheckBox").prop("checked", true);per le caselle di controllo.

Puoi giocare con questo codice qui: http://jsbin.com/OSULAtu/1/edit?html, output

Mi è piaciuta la risposta di @Amc. Ho scoperto che l'espressione potrebbe essere ulteriormente condensata per non usare una chiamata filter () (apparentemente anche @chaiko l'ha notato). Inoltre, prop () è la strada da percorrere vs attr () per jQuery v1.6 +, consultare la documentazione jQuery per prop () per le migliori pratiche ufficiali in materia.

Considera gli stessi tag di input dalla risposta di @Paolo Bergantino.

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

Il one-liner aggiornato potrebbe essere simile a:

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

Penso che si possa presumere che quel nome sia unico e che tutte le radio del gruppo abbiano lo stesso nome. Quindi è possibile utilizzare il supporto jQuery in questo modo:

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

Nota: il passaggio dell'array è importante.

Versione condizionata:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}

Se vuoi che sia veramente dinamico e seleziona la radio che corrisponde ai dati in arrivo, questo funziona. Sta utilizzando il valore di genere dei dati passati o utilizza l'impostazione predefinita.

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

Soluzione 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

E se vuoi passare un valore dal tuo modello e vuoi selezionare un pulsante di opzione dal gruppo al caricamento in base al valore, usa:

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

E l'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>

Non ho bisogno di tutto questo. Con HTML semplice e vecchio puoi ottenere ciò che desideri. Se lasci che la radio che desideri
<input type='radio' name='gender' checked='true' value='Male'>
venga controllata per impostazione predefinita in questo modo: quando la pagina viene caricata, verrà controllata.

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

Ecco un esempio con i metodi sopra:

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

In javascript:

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

Nota questo comportamento quando si ottengono i valori di ingresso 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() ); 

});

Pertanto $('input[name="myRadio"]').val(), non restituisce il valore verificato dell'ingresso radio, come ci si potrebbe aspettare, ma restituisce il valore del primo pulsante di opzione.

Dequesta forma Jquery contiene solo l'elemento selezionato

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

// Se lo stai facendo su javascript o su un framework come backbone, lo incontrerai molto potresti avere qualcosa del genere

$MobileRadio = $( '#mobileUrlRadio' );

mentre

$MobileRadio.checked = true;

non funzionerà,

$MobileRadio[0].checked = true;

volere.

il tuo selettore può essere anche quello consigliato dagli altri ragazzi.

Funziona con più pulsanti di opzione

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