Bouton radio jQuery set

134

J'essaye de définir un bouton radio. Je veux le définir en utilisant la valeur ou l'identifiant.

C'est ce que j'ai essayé.

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true);

newcol est l'identifiant du bouton radio.

Peut-être qu'une petite modification s'impose.

Il existe deux ensembles de boîtes radio, l'une avec des cols et l'autre avec des lignes. Je vois donc l'intérêt de ne pas utiliser les identifiants. Ma faute. J'ai donc pour exemple:

<input type="radio" name="rows" class="listOfCols" 
   style="width: 50%; " value="Site"></input>

et

<input type="radio" name="cols" class="listOfCols" 
   style="width: 50%; "  value="Site"></input>

avec l'identifiant supprimé, et je dois définir le bon.

jquery radio-button

— mike628
source

5

duplication possible de la façon de définir l'option radio vérifiée onload avec jQuery

— Chris Pratt

196

Votre sélecteur recherche le descendant d'un input:radio[name=cols]élément qui a l'id de newcol(enfin la valeur de cette variable).

Essayez plutôt ceci (puisque vous sélectionnez de toute façon par ID):

$('#' + newcol).prop('checked',true);

Voici une démo: http://jsfiddle.net/jasper/n8CdM/1/

De plus, à partir de jQuery 1.6, la méthode recommandée pour modifier une propriété est .prop(): http://api.jquery.com/prop

— Jaspe
source

5

+1 pour propvs attr. attrobsolète pour les propriétés et ne fonctionne plus dans jQuery 2.0))

— gavenkoa

87

J'ai trouvé la réponse ici:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

Fondamentalement, si vous souhaitez cocher un bouton radio, vous DEVEZ passer la valeur sous forme de tableau:

$('input:radio[name=cols]').val(['Site']);
$('input:radio[name=rows]').val(['Site']);

— Chococroc
source

Hello That Link ne contient aucun contenu suggéré. Pourquoi refusez-vous toujours ma modification pour supprimer le lien. Il ne contient rien concernant la matière.

— Menuka Ishan

@MenukaIshan, le point est: Donnez du crédit. Le lien est disponible sur web.archive.org, et celui qui l'a écrit la première fois et dont j'ai eu l'idée de la réponse doit recevoir son crédit. Ne supprimez pas le lien, et si vous voulez voir le message original, copiez et collez le lien (je ne sais pas pourquoi il va à l'ancienne page au lieu de web.archive.org)

— Chococroc

2

@Chococroc Vous n'avez pas configuré correctement le Markdown de la question. J'ai vu la version d'archive Web et l'ai liée correctement. Après examen, il établira correctement un lien vers le site.

— Menuka Ishan

2

Il semble que cela devrait être la réponse acceptée car c'est la solution mentionnée dans la documentation jQuery

— plong0

15

Dans votre sélecteur, vous semblez tenter de récupérer un élément imbriqué de votre bouton radio avec un identifiant donné. Si vous souhaitez cocher un bouton radio, vous devez sélectionner ce bouton radio dans le sélecteur et pas autre chose:

$('input:radio[name="cols"]').attr('checked', 'checked');

Cela suppose que vous ayez le bouton radio suivant dans votre balisage:

<input type="radio" name="cols" value="1" />

Si votre bouton radio avait un identifiant:

<input type="radio" name="cols" value="1" id="myradio" />

vous pouvez directement utiliser un sélecteur d'identifiant:

$('#myradio').attr('checked', 'checked');

— Darin Dimitrov
source

S'il y a plusieurs radios avec le colsnom, alors $('input:radio[name="cols"]').attr('checked', 'checked');sélectionnera uniquement la dernière. Il exécutera le code sur chacun, mais chaque fois que vous définissez la checkedpropriété, l'élément précédemment défini est annulé. Voici une démo: jsfiddle.net/jasper/n8CdM/2

— Jasper

@Jasper, oui, c'est vrai. C'est pourquoi j'ai suggéré d'utiliser un sélecteur d'identifiant.

— Darin Dimitrov

12

Vous pouvez essayer le code suivant:

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

Cela définira l'attribut vérifié pour les colonnes radio et la valeur comme spécifié.

— punita.gosar
source

1

...the most important concept to remember about the checked attribute is that it does not correspond to the checked property.

Source: api.jquery.com/attr

— Jasper

10

Pourquoi avez-vous besoin 'input:radio[name=cols]'. Je ne connais pas votre html, mais en supposant que les identifiants sont uniques, vous pouvez simplement le faire.

$('#'+newcol).prop('checked', true);

— elclans
source

6

Essaye ça:

$("#" + newcol).attr("checked", "checked");

J'ai eu des problèmes avec attr("checked", true), donc j'ai tendance à utiliser ce qui précède à la place.

De plus, si vous avez l'ID, vous n'avez pas besoin de ces autres éléments pour la sélection. Un identifiant est unique.

— L'ours effrayé
source

1

prop est meilleur que attr pour des choses comme ça

— RozzA

attr est parti dans jQuery 1.9+ Utilisez prop.

— Mike_Laird

Vous avez raison, mais finalement cela dépend de votre situation spécifique. Si votre code fonctionnera toujours avec jQuery 1.6+, alors prop est la voie à suivre. Mais si votre code peut s'exécuter sur des versions plus anciennes, la solution n'est pas aussi simple. Par exemple, je maintiens le plugin jQuery PickList, et nous supportons jQuery 1.4+, donc simplement utiliser prop n'est pas une option. C'est un billet ouvert, donc si vous avez des suggestions élégantes, j'aimerais les entendre; Je n'ai tout simplement pas encore eu le temps de faire des recherches.

— The Awnry Bear

Le problème est que même si votre solution est plus rétrocompatible, elle ne fonctionne tout simplement pas dans ce cas: sélectionnez A, il obtiendra un nouvel checked="checked"attribut et le navigateur l'affichera comme coché, puis sélectionnez B et la même chose se produira. Maintenant, lorsque vous sélectionnez à nouveau A, il aura déjà un checked="checked"attribut et rien ne changera. En tant qu'effet secondaire de ce B sera toujours sélectionné, pas A.

— Kyborek

2

Puisqu'il newcols'agit de l'ID du bouton radio, vous pouvez simplement l'utiliser comme ci-dessous.

$("#"+newcol).attr('checked',true);

— Selvakumar Arumugam
source

2

L'utilisation .filter()fonctionne également et est flexible pour l'id, la valeur, le nom:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

(vu sur ce blog )

— dhc
source

1

Je pense que c'est une réponse tout aussi valable, mais elle devrait utiliser la méthode prop (): $ ('input [name = "cols"]'). Filter ("[value = 'Site']"). Prop ('checked ', vrai);. L'utilisateur souhaite définir par "valeur ou id". Il peut arriver que vous ne vouliez pas définir de valeurs d'identifiant pour chaque option radio, il est donc utile d'obtenir par nom et filtrer par valeur.

— Zac Imboden

2

Combinaison des réponses précédentes:

$('input[name="cols"]').filter("[value='Site']").click();

— Graham Laight
source

0

Vous pouvez simplement utiliser:

$("input[name='cols']").click();

— Markoj
source

0

La réponse choisie fonctionne dans ce cas.

Mais la question portait sur la recherche de l'élément en fonction du radiogroupe et de l'identifiant dynamique, et la réponse peut également laisser le bouton radio affiché inchangé.

Cette ligne sélectionne exactement ce qui a été demandé tout en affichant également le changement à l'écran.

$('input:radio[name=cols][id='+ newcol +']').click();

— moi_
source