web-dev-qa-db-fra.com

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

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 souhaite obtenir la valeur du bouton radio sélectionné lorsque l’un de ces trois éléments est cliqué. Dans jQuery, nous avons les 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(){});

S'il vous plaît dites-moi comment résoudre ce problème.

javascriptjqueryhtmlradio-button
326
Prashant

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

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

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

335
Paolo Bergantino

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 capturé 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 ci-dessus de Paolo était meilleure, car elle utilise une traversée de moins dans le DOM. Je laisse cette réponse inactive car elle montre comment obtenir l'élément sélectionné de manière compatible avec plusieurs navigateurs.

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

autrement

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

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

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

Le code suivant permet d’obtenir la valeur du bouton radio sélectionné par son nom.

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

Merci Adnan

15
Muhammad Adnan

J'ai trouvé cette question alors que je recherchais une erreur après la mise à niveau de 1.7.2 de jQuery à 1.8.2. J'ajoute ma réponse parce qu'il y a eu un changement dans jQuery 1.8 et supérieur qui modifie la réponse à cette question maintenant.

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

Pour faire ce qui précède, il suffit de remplacer le :radio par [type=radio].

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

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

Vous pouvez en savoir plus sur les changement sur le fichier lisez-moi 1.8 et le ticket spécifique pour ce changement , ainsi qu’à comprendre pourquoi sur le : page du sélecteur de radio sous la section Informations complémentaires.

13
klabranche

Pour ceux qui ne veulent pas inclure une bibliothèque à 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

12
A1rPun

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

alert ($ ("entrée: radio: vérifié"). val ());
9
lhoess

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

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

Voici l'URL de violon

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

6
Muhammad Salman

Si vous voulez une valeur true/false, utilisez ceci:

  $("input:radio[name=theme]").is(":checked")
4
gls123
<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
kartheek

Quelque chose comme ça peut-être?

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

Lorsque vous cliquez sur un bouton radio, je pense qu'il sera sélectionné et sera appelé pour le bouton radio sélectionné.

3
tschaible

Si vous avez plusieurs groupes 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é!

3
ahmed

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()
2
Daniel Fernandes

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 (function () {
 if ($ (this) .is (': vérifié')) 
 alerte ($ (this) .val ()); 
});

J'espère que ça aide..

1
Ravi M

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

Vous créez le contrôle RadioButton dans ASP.NET comme 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.NET restitue le code HTML suivant pour votre RadioButton

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

Pour ASP.NET nous ne souhaitons pas utiliser RadioButton nom ou id de contrôle car ils peuvent changer pour une raison quelconque, hors de la main de l'utilisateur (changement du nom du conteneur, du nom du formulaire, du nom du contrôle utilisateur, ...) vous pouvez voir dans le code ci-dessus.

Le seul moyen possible d'obtenir la valeur de RadioButton à l'aide de jQuery consiste à utiliser la classe css comme indiqué dans la section this pour répondre à une question totalement indépendante, comme suit

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
0
AaA
$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});
0
Ankur