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


297

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


1
@ryenus, l'autre question ne serait-elle pas un double de la mienne puisque j'ai posé la mienne avant l'autre question?
Phill Pafford

Réponses:


559

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

Je me demande simplement Paolo, IIRC la spécification dit que l'attribut vérifié est censé être vérifié = "vérifié" (bien que je puisse me tromper). JQuery se traduit-il par «vérifié» dans cet exemple? Juste curieux ...
alex

8
Mon exemple d'origine avait «vérifié», «vérifié», c'est une de ces choses dont je ne me souviens jamais laquelle est la bonne. jQuery le calcule de toute façon, mais je sais que si vous voulez définir l'attribut vérifié réel d'un élément DOM, il est censé être un booléen, comme, document.getElementById ('x'). check = true; - alors je suis allé avec ça.
Paolo Bergantino

Je veux juste ajouter cette notation entre crochets [nom = sexe] ne fonctionne pas dans le navigateur de stock de Windows Phone 7.
最 白 目

Je viens de l'essayer avec FF et jQuery 1.9.1 et .attr ('vérifié', vrai); ne fonctionne pas, cependant .prop ('vérifié', vrai); Est-ce que. regardez stackoverflow.com/questions/4618733/… (en double?)
IARI

Un rapide: NE PAS utiliser $radios.removeAttr('checked')avant l'hélice. Cela confondra le navigateur et les valeurs publiées.
igasparetto

110

Que diriez-vous d'une doublure?

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

Ce qui précède est meilleur car il prend en charge des valeurs de nom plus complexes.
J. Martin

13
Cela ne répond pas entièrement à la question des opérations - il doit d'abord vérifier si une option par défaut est déjà vérifiée. De plus, vous devriez maintenant utiliser prop () au lieu de attr () pour ce genre de chose. Pour obtenir des explications, consultez la section «Attributs par rapport aux propriétés» ici: api.jquery.com/prop . De plus, le filtre supplémentaire n'est pas nécessaire, vous pouvez simplement combiner les 2 sélecteurs, par exemple $ ("input [name = gender] [value = Male]"). Prop ("checked", true);
jackocnr

3
Cette solution fonctionne pour la première fois que je règle la radio mais échoue par la suite. En utilisant "prop" au lieu de "attr", cela fonctionne parfaitement. So: $ ('input: radio [name = "gender"]'). Filter ('[value = "Male"]'). Prop ('checked', true);
Andrew

2
Correct - prop () est désormais la méthode recommandée pour accéder aux propriétés.
Andrew McCombe

1
Plus simple: $ ('input: radio [name = "gender"] [value = "Male"]'). Attr ('checked', true);
Régis

52

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

5
je vous recommande d'utiliser un déclencheur («clic») plus lisible et arrête un appel de méthode.
Barkermn01

35

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


22

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

15

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

1
C'est mauvais votre balayage de chaque élément pour une valeur je ne recommande pas que cela soit utilisé jamais
Barkermn01

@MartinBarker pouvez-vous expliquer ce que vous les hommes en "scannant"?
Saram

Si vous utilisez le DOM, si vous n'utilisez rien d'autre qu'un attribut, votre requête jQuery doit passer par tous les éléments du DOM et vérifier cette correspondance de la même manière que si vous l' $("*")utilisiez correspondrait à tout, vous devez donc utiliser un type au bail $("input")ou un ID. être idéal car le DOM a des appels natifs pour obtenir un élément par id
Barkermn01

@MartinBarker - Je suis d'accord. Habituellement, je préfixe le sélecteur avec un identifiant de formulaire ou je fournis un paramètre de contexte. Actuellement, l'analyse du DOM n'est pas un effort jQuery mais un moteur de navigateur interne, document.querySelectorAllfait tout le travail.
Saram

Pour répondre aux préoccupations ci-dessus, utilisez $("input[name=gender]")ou $("input[name=gender]:radio")ou (pour les navigateurs modernes)$("input[name=gender][type=radio]")
David Balažic

7

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

5

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

3

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>

2

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.


3
oui mais j'ai besoin qu'il soit dynamique car le site référent transmettrait les valeurs par défaut au chargement de la page. Cela fait un moment que je n'ai pas pensé à cette question, donc j'espère que je comprends ce que vous essayez de dire
Phill Pafford

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

6
Veuillez ne pas publier de réponses uniquement en code. Veuillez également donner une explication.
Lee Taylor

2

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

1

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.


1

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

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

2
Vous devez décrire votre réponse et formater votre code
Michael

0

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


0

Cela fonctionne pour plusieurs boutons radio

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.