Dans jQuery, comment sélectionner un élément par son attribut de nom?


328

J'ai 3 boutons radio dans ma page Web, comme ci-dessous:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

Dans jQuery, je veux obtenir la valeur du bouton radio sélectionné lorsque l'un de ces trois est cliqué. Dans jQuery, nous avons des sélecteurs id (#) et class (.), Mais que faire si je veux trouver un bouton radio par son nom, comme ci-dessous?

$("<radiobutton name attribute>").click(function(){});

Veuillez me dire comment résoudre ce problème.


5
vous n'avez pas strictement besoin de spécifier l'attribut 'for', tant que les champs sont inclus entre leurs balises 'label' correspondantes
Lucius

2
jQuery 1.8 et supérieur modifie cela .... J'ai ajouté une réponse ci-dessous expliquant.
Kevin LaBranche

3
La réponse d'A1rPun est la meilleure: une doublure non jQuery!
Rudey

1
J'ai utilisé un bouton radio pour maintenir l'état dans mon application js. Débogué pendant une bonne heure avant de vérifier ce fil. Vérifiez cela
Prasanth

En clair JS:document.querySelectorAll("input:radio[name=theme]").forEach(function() { this.onclick=function() { var value = this.value; }; });
mplungjan

Réponses:


339

Cela devrait le faire, tout cela est dans la documentation , qui a un exemple très similaire à ceci:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

Je dois également noter que vous avez plusieurs identifiants identiques dans cet extrait. Ce code HTML n'est pas valide. Utilisez des classes pour regrouper un ensemble d'éléments, et non des ID, car ils doivent être uniques.


4
@gargantaun - si vous cliquez sur un bouton radio, que se passe-t-il?
Paolo Bergantino

11
Bon point. Bien que ce ne soit toujours pas "Comment obtenir la valeur du bouton radio sélectionné en utilisant son nom dans jQuery?". C'est "Comment obtenir la valeur du bouton radio sélectionné en cliquant dessus avec jQuery?". Une petite différence, mais qui m'a un peu dérouté.
gargantuesque

1
Selon la question, cette réponse est correcte. dans une vision globale, nous optons pour la réponse de clayton.
Krish

8
À partir de jQuery 1.8, utiliser à la [type='radio']place de :radiocette façon, jQuery peut profiter de l'amélioration des performances fournie par la querySelectorAll()méthode DOM native .
Adam

2
La réponse @PaoloBergantino est correcte à 100% car elle renvoie la valeur après avoir cliqué sur le bouton radio souhaité. @ La réponse Clayton Rabenda ne donne pas cela.
Azam Alvi

185

Pour déterminer quel bouton radio est coché, essayez ceci:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

L'événement sera intercepté pour tous les boutons radio du groupe et la valeur du bouton sélectionné sera placée dans val.

Mise à jour: Après avoir posté, j'ai décidé que la réponse de Paolo ci-dessus est meilleure, car elle utilise une traversée DOM de moins. Je laisse cette réponse reposer car elle montre comment obtenir l'élément sélectionné d'une manière compatible avec plusieurs navigateurs.


3
Base don comment j'ai lu la question, c'était la réponse dont j'avais besoin. : vérifié est ce qui me manquait dans mon équation. Merci.
HPWD du

9
À partir de jQuery 1.8, utiliser à la [type='radio']place de :radiocette façon, jQuery peut profiter de l'amélioration des performances fournie par la querySelectorAll()méthode DOM native .
Adam

J'ai donné un espace après les deux points et avant "vérifié" par erreur. Veuillez donc vous assurer qu'il n'y a pas d'espace.
Singe fumeur

Une réponse utile pour ceux qui ne souhaitent pas obtenir la valeur d'un gestionnaire d'événements click. Sinon, vous devez utiliser :checkedpour trouver le bouton qui est vérifié, par exemple, avec un gestionnaire d'événements de soumission de formulaire où le thismot-clé ne correspond pas au bouton cliqué.
che-azeh du

155
$('input:radio[name=theme]:checked').val();

J'ai continué simplement avec $("input[name=theme]:checked").val();(en laissant de :radiocôté la partie et cela semble bien fonctionner dans IE, FF, Safari et Chrome. J'ai dû travailler avec jQ v 1.3 ... Bien sûr, cela signifie qu'il n'y a qu'un seul élément nommé 'thème'
morespace54

2
Ceci est la meilleure réponse OMI, il dit "obtenez-moi la valeur de la radio CHECKED avec CE nom". Pas besoin d'événements, etc.
ProVega

39

autrement

$('input:radio[name=theme]').filter(":checked").val()

1
Celui-ci est utile si vous êtes intéressé à saisir la valeur +1
swapnesh

Ceci est solide car vous pouvez utiliser une variable pour conserver les boutons radio, par exemple $themeRadios = $('input:radio[name=theme'])pour définir des gestionnaires d'événements, puis obtenir la valeur en utilisant le filtre, par exemple $themeRadios.filter(":checked").val().
Joshua Pinter

J'adore cette solution.
Abel

20

Cela fonctionne très bien pour moi. Par exemple, vous avez deux boutons radio avec le même "nom", et vous vouliez simplement obtenir la valeur de celle cochée. Vous pouvez essayer celui-ci.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

La raison pour laquelle cette réponse est meilleure que la réponse actuellement approuvée en 230+ est parce que cette réponse tient également compte lorsque l'utilisateur interagit avec un bouton radio par clavier.
gmeben

16

Le code suivant est utilisé pour obtenir la valeur du bouton radio sélectionné par son nom

jQuery("input:radio[name=theme]:checked").val();

Merci Adnan


hmm .. n'ai-je pas corrigé la mise en forme de votre code dans votre dernière réponse? Veuillez vous en occuper vous-même :-)
kleopatra

13

J'ai trouvé cette question car je recherchais une erreur après avoir mis à niveau 1.7.2 de jQuery vers 1.8.2. J'ajoute ma réponse car il y a eu un changement dans jQuery 1.8 et supérieur qui change la façon dont cette question est répondue maintenant.

Avec jQuery 1.8, ils ont déconseillé les pseudo-sélecteurs comme: radio,: case à cocher,: texte.

Pour faire ce qui précède, remplacez simplement le :radiopar [type=radio].

Donc, votre réponse devient maintenant pour toutes les versions de jQuery 1.8 et supérieures:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
}); 

Vous pouvez en savoir plus sur le changement dans le fichier Lisez - moi 1.8 et le ticket spécifique pour ce changement ainsi que comprendre pourquoi sur la page: sélecteur de radio dans la section Informations supplémentaires.


5
: coché n'est pas déconseillé. Vous pouvez donc utiliser$("input[type='radio'][name='theme']:checked")
Adam

12

Pour quiconque ne souhaite pas inclure une bibliothèque pour faire quelque chose de très simple:

document.querySelector('[name="theme"]:checked').value;

jsfiddle

Pour un aperçu des performances des réponses actuelles , cliquez ici


1
Merci pour cette réponse. Parce que je n'ai pas pu obtenir la réponse acceptée pour travailler sous quelque forme que ce soit.
Chris Holmes

9

Si vous souhaitez connaître la valeur du bouton radio sélectionné par défaut avant un événement de clic, essayez ceci:

alert ($ ("entrée: radio: cochée"). val ());

6

Vous pouvez utiliser la fonction de filtrage si vous avez plusieurs groupes radio sur la page, comme ci-dessous

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

Voici l'URL du violon

http://jsfiddle.net/h6ye7/67/


4
<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

4

Si vous voulez une valeur vraie / fausse, utilisez ceci:

  $("input:radio[name=theme]").is(":checked")

3

Quelque chose comme ça peut-être?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

Lorsque vous cliquez sur un bouton radio, je pense qu'il finira par être sélectionné, donc cela va être appelé pour le bouton radio sélectionné.


1
Le @ n'est pas valide à partir de jQuery 1.3 (déconseillé avant cela, même). blog.jquery.com/2009/01/05/help-test-jquery-13-beta-2 "Anciens, XPath, sélecteurs d'attributs de style: [@ attr = value]. Ceux-ci sont obsolètes depuis un certain temps - et nous les supprimons enfin. Pour le corriger, supprimez simplement le @! "
racerror

3

Si vous avez plus d'un groupe de boutons radio sur la même page, vous pouvez également essayer ceci pour obtenir la valeur du bouton radio:

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

À votre santé!


2

peut également utiliser une classe CSS pour définir la plage de boutons radio, puis utiliser les éléments suivants pour déterminer la valeur

$('.radio_check:checked').val()

1

Cela a fonctionné pour moi ..

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Jquery:

    $ (". radioClass"). each (fonction () {
        if ($ (this) .is (': vérifié'))
        alert ($ (this) .val ());
    });

J'espère que ça aide..


0
$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

0

Vous remarquerez peut-être que l'utilisation du sélecteur de classe pour obtenir la valeur des ASP.NET RadioButtoncontrôles est toujours vide et voici la raison.

Vous créez le RadioButtoncontrôle ASP.NETcomme ci-dessous:

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

Et ASP.NETrend le HTML suivant pour votreRadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

Car ASP.NETnous ne voulons pas utiliser RadioButtonle nom ou l'id du contrôle car ils peuvent changer pour une raison quelconque de la main de l'utilisateur (changement du nom du conteneur, du nom du formulaire, du nom du contrôle utilisateur, ...) comme vous pouvez le voir dans le code ci-dessus.

Le seul moyen restant possible d'obtenir la valeur de l' RadioButtonutilisation de jQuery consiste à utiliser la classe css comme mentionné dans cette réponse à une question totalement indépendante comme suit

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
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.