comment définir l'option radio cochée onload avec jQuery

Comment définir l'option radio cochée onload avec jQuery?

Vous devez vérifier si aucune valeur par défaut n'est définie, puis définir une valeur par défaut

Supposons que vous disposiez de boutons radio comme ceux-ci, par exemple:

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

Et vous vouliez vérifier celui avec une valeur de charge "Homme" si aucune radio n'est cochée:

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

Que diriez-vous d'une doublure?

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

Celui-ci entraînera l'échec de form.reset ():

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

Mais celui-ci fonctionne:

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

JQuery a en fait deux façons de définir l'état vérifié pour la radio et les cases à cocher et cela dépend si vous utilisez l'attribut value dans le balisage HTML ou non:

S'ils ont un attribut value:

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

S'ils n'ont pas d'attribut value:

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

Plus de détails

Dans le premier cas, nous spécifions le groupe de radio entier en utilisant le nom et demandons à JQuery de trouver la radio à sélectionner en utilisant la fonction val. La fonction val prend un tableau à 1 élément et trouve la radio avec la valeur correspondante, définissez son vérifié = vrai. D'autres portant le même nom seraient désélectionnés. Si aucune radio avec une valeur correspondante trouvée, tout sera désélectionné. S'il y a plusieurs radios avec le même nom et la même valeur, la dernière sera sélectionnée et d'autres seront désélectionnées.

Si vous n'utilisez pas d'attribut de valeur pour la radio, vous devez utiliser un ID unique pour sélectionner une radio particulière dans le groupe. Dans ce cas, vous devez utiliser la fonction prop pour définir la propriété "vérifié". Beaucoup de gens n'utilisent pas d'attribut value avec des cases à cocher, donc # 2 est plus applicable aux cases à cocher qu'aux radios. Notez également que comme les cases à cocher ne forment pas de groupe lorsqu'elles ont le même nom, vous pouvez le faire$("[name=myCheckBox").prop("checked", true); pour les cases à cocher.

Vous pouvez jouer avec ce code ici: http://jsbin.com/OSULAtu/1/edit?html,output

J'ai aimé la réponse de @Amc. J'ai trouvé que l'expression pouvait être condensée davantage pour ne pas utiliser un appel filter () (@chaiko a apparemment également remarqué cela). Aussi, prop () est le chemin à parcourir vs attr () pour jQuery v1.6 +, voir la documentation jQuery pour prop () pour les meilleures pratiques officielles sur le sujet.

Considérez les mêmes balises d'entrée de la réponse de @Paolo Bergantino.

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

Le one-liner mis à jour peut lire quelque chose comme:

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

Je pense que vous pouvez supposer que ce nom est unique et que toutes les radios du groupe portent le même nom. Ensuite, vous pouvez utiliser le support jQuery comme ça:

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

Remarque: le passage de tableau est important.

Version conditionnée:

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

Si vous voulez qu'il soit vraiment dynamique et sélectionnez la radio qui correspond aux données entrantes, cela fonctionne. Il utilise la valeur de genre des données transmises ou utilise la valeur par défaut.

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

Solution JS native:

 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

Et si vous souhaitez transmettre une valeur de votre modèle et sélectionner un bouton radio dans le groupe en charge en fonction de la valeur, utilisez:

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

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

Je n'ai pas besoin de tout ça. Avec du HTML simple et ancien, vous pouvez réaliser ce que vous voulez. Si vous laissez la radio que vous voulez cochée par défaut comme ceci:
<input type='radio' name='gender' checked='true' value='Male'>
Lorsque la page se charge, elle sera vérifiée.

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

Voici un exemple avec les méthodes ci-dessus:

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

Notez ce comportement lors de l'obtention des valeurs d'entrée 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() ); 

});

Donc, $('input[name="myRadio"]').val()ne renvoie pas la valeur vérifiée de l'entrée radio, comme vous pouvez vous y attendre - il renvoie la valeur du premier bouton radio.

De esta forma Jquery obtiene solo el elemento vérifié

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

// Si vous le faites sur javascript ou un framework comme backbone, vous rencontrerez beaucoup cela, vous pourriez avoir quelque chose comme ça

$MobileRadio = $( '#mobileUrlRadio' );

tandis que

$MobileRadio.checked = true;

ne fonctionnera pas,

$MobileRadio[0].checked = true;

volonté.

votre sélecteur peut être aussi recommandé par les autres gars ci-dessus.

Cela fonctionne pour plusieurs boutons radio

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