Définir la radio sélectionnée dans le groupe radio avec une valeur


153

Pourquoi ai-je du mal avec ça?

J'ai une valeur: 5

Comment puis-je cocher le bouton radio du groupe "mongroupe" avec la valeur 5?

$("input[name=mygroup]").val(5); // doesn't work?

Réponses:


351

À l'aide du sélecteur d'attribut, vous pouvez sélectionner l'élément d'entrée avec la valeur correspondante. Ensuite, vous devez définir l'attribut explicitement, en utilisant .attr:

var value = 5;
$("input[name=mygroup][value=" + value + "]").attr('checked', 'checked');

Depuis jQuery 1.6, vous pouvez également utiliser la .propméthode avec une valeur booléenne (cela devrait être la méthode préférée):

$("input[name=mygroup][value=" + value + "]").prop('checked', true);

N'oubliez pas que vous devez d'abord supprimer l'attribut coché de l'un des boutons radio sous un groupe de boutons radio uniquement, puis vous pourrez ajouter une propriété / attribut vérifié à l'un des boutons radio de ce groupe de boutons radio.

Code pour supprimer l'attribut coché de tous les boutons radio d'un groupe de boutons radio -

$('[name="radioSelectionName"]').removeAttr('checked');

.prop ('vérifié', vrai) est probablement meilleur ou .is ()
bladefist

3
@bladefist: n'aiderait .ispas ici, mais je suis d'accord avec .prop. Il n'était pas disponible à l'époque;) Mettra à jour ma réponse. Merci!
Felix Kling

4
Si la valeur du bouton radio a une décimale, vous devez mettre la valeur entre guillemets
Robert

1
@Robert: Oui, probablement. Extrait de la documentation : "Peut être soit un seul mot sans guillemets, soit une chaîne entre guillemets."
Felix Kling

5
Voir la réponse de Jonathan. Les documents jQuery montrent qui .val()prend en charge la définition de valeurs sur des groupes de radio ou de cases à cocher. La manière de cette réponse fonctionne techniquement, mais elle est détournée et beaucoup moins lisible / mémorable.
jinglesthula

144

Il existe une meilleure façon de vérifier les radios et les cases à cocher; vous devez passer un tableau de valeurs à la méthode val au lieu d'une valeur brute

Remarque: Si vous transmettez simplement la valeur par elle-même (sans être dans un tableau ), toutes les valeurs de "mygroup" seront définies sur la valeur.

$("input[name=mygroup]").val([5]);

Voici la documentation jQuery qui explique son fonctionnement: http://api.jquery.com/val/#val-value

Et .val([...])travaille aussi avec des éléments de forme tels que <input type="checkbox">, <input type="radio">et <option>s à l' intérieur d'un <select>.

Les entrées et les options ayant une valeur qui correspond à l'un des éléments du tableau seront vérifiées ou sélectionnées, tandis que celles ayant une valeur qui ne correspond pas à l'un des éléments du tableau seront décochées ou désélectionnées

Fiddle démontrant ce fonctionnement: https://jsfiddle.net/92nekvp3/


Réponse acceptée (bien, devrait l'être). Depuis jQuery 1.0, voir le dernier exemple de la documentation ( faites défiler vers le bas): api.jquery.com/val Copié ici: jsfiddle.net/JoePC/w1f9ykso
JoePC

C'est une manière agréable et cohérente de définir toutes les valeurs d'entrée. Dommage qu'il m'ait fallu 6 ans pour en savoir plus.
Jeff Lowery

1
J'ai passé un certain temps à essayer de comprendre pourquoi toutes mes valeurs dans le groupe étaient définies sur la valeur passée au lieu de vérifier la valeur. Il s'avère que j'ai passé la valeur par elle-même, pas à l'intérieur d'un tableau.
OXiGEN


8
$("input[name='mygroup'][value='5']").attr("checked", true);

7

Lorsque vous modifiez la valeur d'attribut comme mentionné ci-dessus, l' changeévénement n'est pas déclenché, donc si nécessaire, pour certaines raisons, vous pouvez le déclencher comme tel

$('input[name=video_radio][value="' + r.data.video_radio + '"]')
       .prop('checked', true)
       .trigger('change');


1

Ou vous pouvez simplement lui écrire un attribut value:

$(':radio[value=<yourvalue>]').attr('checked',true);

Cela fonctionne pour moi.


0
var key = "Name_radio";
var val = "value_radio";
var rdo = $('*[name="' + key + '"]');
if (rdo.attr('type') == "radio") {
 $.each(rdo, function (keyT, valT){
   if ((valT.value == $.trim(val)) && ($.trim(val) != '') && ($.trim(val) != null))

   {
     $('*[name="' + key + '"][value="' + (val) + '"]').prop('checked', true);
   }
  })
}

4
Pouvez-vous expliquer ce que fait votre code dans votre réponse? Au moins une phrase ou deux. Et comment cela résout la solution. Je vous remercie.
Alex

0

Version JavaScript pure:

document.querySelector('input[name="myradio"][value="5"]').checked = true;

-1
$('input[name="mygroup"]').val([5])

1
Pouvez-vous expliquer ce qui différencie votre solution des autres solutions déjà proposées?
Giovani Vercauteren

@Giovani Vercauteren, nous devrions donner le nom sous forme de chaîne. Je donne donc le mygroup sous forme de chaîne dans le code.
Anjitha
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.