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

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.

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.

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.

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

autrement

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

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

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

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.

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

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

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/

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

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

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

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

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é!

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

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

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

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