web-dev-qa-db-fra.com

comment configurer l'option radio cochée au chargement avec jQuery

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

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

jqueryradio-button
280
Phill Pafford

Supposons que vous ayez des 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 "Homme" en charge 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);
    }
});
518
Paolo Bergantino

Que diriez-vous d'un one-liner?

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

Celui-ci provoquera un échec de form.reset ():

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

Mais celui-ci fonctionne:

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

JQuery dispose en réalité de deux manières de définir le statut vérifié pour la radio et les cases à cocher. Cela dépend si vous utilisez ou non l'attribut value dans le balisage HTML:

S'ils ont l'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 name et disons à JQuery de trouver la radio pour 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 sa valeur vérifié: true. Les autres avec le même nom seraient désélectionnés. Si aucune radio avec une valeur correspondante trouvée, toutes seront désélectionnées. Si plusieurs radios ont le même nom et la même valeur, le dernier sera sélectionné et les autres seront désélectionnés.

Si vous n'utilisez pas l'attribut value pour la radio, vous devez utiliser un identifiant 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 les cases à cocher, donc # 2 est plus applicable pour les cases à cocher que pour les radios. Notez également que, comme les cases à cocher ne forment pas de groupe lorsqu'elles portent le même nom, vous pouvez utiliser $("[name=myCheckBox").prop("checked", true); pour les cases à cocher.

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

28
Shital Shah

J'ai aimé la réponse de @Amc. J'ai trouvé que l'expression pourrait être condensée davantage pour ne pas utiliser un appel filter () (@chaiko apparemment aussi remarqué cela). En outre, prop () est le chemin à parcourir avec attr () pour jQuery v1.6 +, voir la documentation jQuery pour prop () pour les meilleures pratiques officielles en la matière.

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 pourrait avoir l'aspect suivant:

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

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

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

Remarque: Passer un tableau est important.

Version conditionnée:

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

Si vous voulez que ce 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);
};
7
WildSpidee

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
4
Razan Paul

Et si vous souhaitez transmettre une valeur de votre modèle et sélectionner un bouton radio du 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>
3
Iftikhar
 $("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
2
rookie to jquery

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

Vous n'avez pas besoin de tout ça .. Avec du HTML simple et ancien, vous pouvez obtenir ce que vous voulez ... Si vous laissez la radio de votre choix être cochée par défaut comme ceci:
<input type='radio' name='gender' checked='true' value='Male'>
Lorsque la page se charge, ça va être vérifié.

2
Carlos Torres

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 cochée de l'entrée radio, comme on pourrait s'y attendre - il renvoie la valeur du premier bouton radio.

1
Bradley Flood

Cela fonctionne pour plusieurs boutons radio

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

Calculateur d'obtention solo d'élément vérifié 

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

// Si vous le faites sur javascript ou un framework tel que backbone, vous rencontrerez beaucoup de problèmes.

$MobileRadio = $( '#mobileUrlRadio' );

tandis que

$MobileRadio.checked = true;

ne fonctionnera pas,

$MobileRadio[0].checked = true;

volonté.

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

0
JrBriones