1034 votes

Comment vérifier un bouton radio avec jQuery ?

J'essaie de vérifier un bouton radio avec jQuery. Voici mon code :

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

Et le JavaScript :

jQuery("#radio_1").attr('checked', true);

Ça ne marche pas :

jQuery("input[value='1']").attr('checked', true);

Ça ne marche pas :

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

Ça ne marche pas :

Avez-vous une autre idée ? Qu'est-ce qui me manque ?

1 votes

Merci pour vos réponses ! J'ai trouvé le problème. En fait, les deux premières façons de faire fonctionnent. Le fait est que j'ai utilisé jqueryUI pour transformer un ensemble de 3 boutons radio en un ensemble de boutons avec ce code : jQuery("#type").buttonset() ; mais le fait d'effectuer ce changement avant de vérifier la radio cassait l'ensemble radio (je ne sais pas pourquoi). Finalement, j'ai mis l'appel buttonset après la vérification de la radio et cela fonctionne impeccablement.

0 votes

Utilisez $("input:radio[value='2']").prop('checked',true) ; lien ici freakyjolly.com/

1693voto

Mike Thomsen Points 12074

Pour les versions de jQuery égales ou supérieures (>=) à 1.6, utilisez :

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

Pour les versions antérieures à (<) 1.6, utilisez :

$("#radio_1").attr('checked', 'checked');

Conseil : Vous pouvez également appeler click() o change() sur le bouton radio par la suite. Voir les commentaires pour plus d'informations.

86 votes

Dans jQuery 1.9 ou plus, cette solution ne fonctionnera pas. Utilisez plutôt $("#radio_1").prop("checked", true) ;.

12 votes

@Installero en fait, prep est correct depuis la 1.6, et requis depuis la 1.9.

46 votes

Il est utile d'ajouter .change() à la fin pour déclencher tout autre événement sur la page.

306voto

miles bennet Points 575

Essayez ça.

Dans cet exemple, je le cible avec son nom et sa valeur d'entrée.

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

Bon à savoir : en cas de valeur de plusieurs mots, cela fonctionnera aussi à cause des apostrophes.

5 votes

C'est probablement la meilleure méthode, les autres ont tendance à rester en place, rendant la fonction inutile la deuxième fois, alors que celle-ci fonctionne comme prévu.

0 votes

J'ai découvert que puisqu'il n'y en a qu'un qui peut être sélectionné, $('input[name="type"]:checked').val() est bien aussi.

0 votes

Veuillez préciser. L'idée générale est de vérifier un bouton radio en l'adressant avec ses attributs - nom et éventuellement, valeur. Je ne suis pas sûr de ce que vous essayez d'accomplir avec ceci, puisque seuls l'attribut name et le pseudo-sélecteur :checked sont utilisés. Et vous récupérez également la valeur, ce qui est plutôt déroutant. Merci

103voto

Karbaman Points 376

Option courte et facile à lire :

$("#radio_1").is(":checked")

Il renvoie vrai ou faux, donc vous pouvez l'utiliser dans une instruction "if".

7 votes

Merci ! C'est ce que je cherchais, mais (pour info) le PO demandait comment paramétrer le bouton radio, pas comment obtenir la valeur. (Le mot "vérifier" rendait la question confuse).

98voto

Umesh Patil Points 5108

Une autre fonction prop(), ajoutée dans jQuery 1.6, sert le même objectif.

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

15 votes

Le site attr('checked', true) a cessé de fonctionner pour moi avec jQuery 1.9, voici la solution !

1 votes

Semble que prop("checked", true) fonctionne, attr('checked', 'checked') n'est pas

0 votes

@TomaszKuter Je recommande d'utiliser prop() car la propriété DOM vérifiée est celle qui devrait affecter le comportement - mais c'est étrange - dans ce bidule ( jsfiddle.net/KRXeV ) attr('checked', 'checked') fonctionne réellement x)

36voto

Lakshmana Kumar Points 1019

Essayez ça.

Pour vérifier le bouton radio en utilisant Valeur utilisez ça.

$('input[name=type][value=2]').attr('checked', true); 

Ou

$('input[name=type][value=2]').attr('checked', 'checked');

Ou

$('input[name=type][value=2]').prop('checked', 'checked');

Pour vérifier le bouton radio en utilisant ID utilisez ça.

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

Ou

$('#radio_1').prop('checked','checked');

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X