Comment obtenir la valeur du bouton radio sélectionné?

265

J'ai un problème étrange avec mon programme JS. Je l'ai fait fonctionner correctement, mais pour une raison quelconque, il ne fonctionne plus. Je veux juste trouver la valeur du bouton radio (lequel est sélectionné) et le retourner à une variable. Pour une raison quelconque, il revient sans cesse undefined.

Voici mon code:

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

submitForm:

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

HTML:

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>
mkyong
la source

Réponses:

395

Vous pouvez faire quelque chose comme ça:

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++) {
  if (radios[i].checked) {
    // do whatever you want with the checked radio
    alert(radios[i].value);

    // only one radio can be logically checked, don't check the rest
    break;
  }
}
<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

Modifier: Merci HATCHA et jpsetung pour vos suggestions de modification.

jbabey
la source
5
Cela fonctionnait pour jquery 1.7 mais maintenant la syntaxe correcte pour jQuery 1.9 est $ ('input [name = "genderS"]: vérifié'). Val (); (supprimer le @)
jptsetung
1
Je crois que la @syntaxe a été dépréciée encore plus tôt que cela (jquery 1.2)
Tom Pietrosanti
@TomPietrosanti la documentation semble un peu décalée , jsfiddle.net/Xxxd3/608 fonctionne en <1.7.2 mais pas en> 1.8.3. Quoi qu'il en soit, le @devrait définitivement être supprimé
jbabey
Oui, il semble qu'ils aient laissé une certaine compatibilité descendante, mais n'ont pas mis à jour les documents pour correspondre. Je me souviens de certains hoopla lorsqu'ils ont abandonné certaines fonctionnalités obsolètes qui étaient encore largement utilisées, alors ils ont ajouté le support. Peut-être que c'est pourquoi ...
Tom Pietrosanti
2
document.querySelector()devrait probablement être l'approche recommandée en JavaScript simple maintenant.
Dave
338

Cela fonctionne avec n'importe quel explorateur.

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

Il s'agit d'un moyen simple d'obtenir la valeur de n'importe quel type d'entrée. Vous n'avez également pas besoin d'inclure le chemin jQuery.

Giorgos Tsakonas
la source
23
L'utilisation de document.querySelector () est une pure réponse javascript: developer.mozilla.org/en-US/docs/Web/API/document.querySelector
AdamJonR
8
Si vous le stockez dans un variabel et qu'aucun bouton radio n'est sélectionné, le navigateur s'arrête. La console dit: TypeError l' document.querySelector(...)est null.
appelez-moi
14
Cela ne fonctionne que si l'un est sélectionné. Vous devriez donc le vérifier avant. var selector = document.querySelector('input[name="genderS"]:checked'); if(selector) console.log(selector.value);
Markus Zeller
Je travaille avec des modèles dans Meteor, et que :checkedtruc totalement clouée pour moi .. pour moi le correctif à la lecture des boutons radio à partir d' un modèle de formulaire MeteoraccountType = template.find("[name='optradio']:checked").value;
zipzit
J'ai un environnement d'entreprise où il ne fonctionne pas de manière cohérente sur IE11 - une sorte de mode de compatibilité descendante.
Steve Black
35
document.forms.your-form-name.elements.radio-button-name.value
imran ansari
la source
5
Cela fonctionne aussi:document.forms.your-form-name.name-shared-by-radio-buttons.value
Web_Designer
7
Je pense que la plupart des gens oublient cela. La réponse acceptée fonctionne. La réponse de Giorgos Tsakonas est meilleure. Mais celui-ci est la réponse fondamentalement correcte. Celui-ci est le fonctionnement réel des boutons radio. Notez que si rien n'a été sélectionné, il renvoie une chaîne vide.
Mark Goldfain
@Web_Designer Votre commentaire ne devrait-il pas également être une vraie réponse?
Idéogramme
Cela ne fonctionne pas si votre entrée radio n'est pas sous une forme, donc je ne pense pas que ce soit une meilleure réponse que celle de querySelector, peut-être que ces deux devraient être fusionnés.
Tomáš Hübelbauer
cela ne fonctionne pas si vos radios sont à l'intérieur des étiquettes
Igor Fomenko
19

Depuis jQuery 1.8, la syntaxe correcte pour la requête est

$('input[name="genderS"]:checked').val();

Plus $('input[@name="genderS"]:checked').val();maintenant, qui fonctionnait dans jQuery 1.7 (avec le @ ).

jptsetung
la source
16

Version ECMAScript 6

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;
Nappy
la source
16

La solution la plus simple:

 document.querySelector('input[name=genderS]:checked').value
Bobur Saidov
la source
1
Voté pour deux raisons: 1. ça marche. 2. ce n'était pas une réponse jquery boiteuse.
John
21
Ceci est une copie exacte de la réponse de @Giorgos Tsakonas ci-dessus qui a été donnée un an plus tôt.
T Nguyen
7

Essaye ça

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;
    alert(sizes);
    for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}


function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
    return false;
}

Un violon ici .

L'Alpha
la source
6

Edit: Comme l'a dit Chips_100, vous devez utiliser:

var sizes = document.theForm[field];

directement sans utiliser la variable de test.


Ancienne réponse:

Tu ne devrais pas evalaimer ça?

var sizes = eval(test);

Je ne sais pas comment cela fonctionne, mais pour moi, vous ne faites que copier une chaîne.

Michael Laffargue
la source
eval n'est pas la meilleure option ici ... vous voudrez peut-être dire var sizes = document.theForm[field];et supprimer la première affectation, donc ne plus utiliser de testvariable.
Dennis
À ma connaissance, eval fonctionnerait-il tel quel? Ou cela fonctionnerait-il uniquement avec eval('var sizes=document.theForm.' + field)?
Michael Laffargue
la déclaration eval dans votre réponse var sizes = eval(test);fonctionnerait de cette façon (je viens de la tester dans firebug).
Dennis
Cela a plus de sens, mais je reçois une erreur "Jeton inattendu [" sur cette ligne où je mets fieldentre crochets. Vous devinez pourquoi?
mkyong
4

Ceci est du pur JavaScript, basé sur la réponse de @Fontas mais avec un code de sécurité pour renvoyer une chaîne vide (et éviter a TypeError) s'il n'y a pas de bouton radio sélectionné:

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

Le code se décompose comme ceci:

  • Ligne 1: obtenez une référence au contrôle qui (a) est un <input>type, (b) a un nameattribut de genderS, et (c) est vérifié.
  • Ligne 2: s'il existe un tel contrôle, retournez sa valeur. S'il n'y en a pas, retournez une chaîne vide. La genderSRadiovariable est vraie si la ligne 1 trouve le contrôle et null / falsey si ce n'est pas le cas.

Pour JQuery, utilisez la réponse de @ jbabey et notez que s'il n'y a pas de bouton radio sélectionné, il reviendra undefined.

Ed Gibbs
la source
4

Au cas où quelqu'un chercherait une réponse et atterrirait ici comme moi, à partir de Chrome 34 et Firefox 33, vous pouvez faire ce qui suit:

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

ou plus simple:

alert(document.theForm.genderS.value);

réfrence: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

ashraf aaref
la source
3

Voici un exemple pour les radios où aucun attribut Vérifié = "vérifié" n'est utilisé

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

DEMO : http://jsfiddle.net/ipsjolly/hgdWp/2/ [ Cliquez sur Rechercher sans sélectionner de radio ]

Source: http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

Code Spy
la source
2

Voici une bonne façon d'obtenir la valeur du bouton radio coché avec du JavaScript simple:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

Source: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

En utilisant ce HTML:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

Vous pouvez également utiliser Array Find la checkedpropriété pour rechercher l'élément coché:

Array.from(form.elements.characters).find(radio => radio.checked);
Rachie M
la source
1

À l'aide d'un javascript pur, vous pouvez gérer la référence à l'objet qui a distribué l'événement.

function (event) {
    console.log(event.target.value);
}
antonjs
la source
1

supposons que vous ayez besoin de placer différentes rangées de boutons radio dans un formulaire, chacun avec des noms d'attribut séparés ('option1', 'option2' etc.) mais le même nom de classe. Peut-être en avez-vous besoin sur plusieurs lignes où chacun soumettra une valeur basée sur une échelle de 1 à 5 se rapportant à une question. vous pouvez écrire votre javascript comme ceci:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

Je voudrais également insérer la sortie finale dans un élément de formulaire caché à soumettre avec le formulaire.

Bruce Tong
la source
1
 document.querySelector('input[name=genderS]:checked').value
alluma
la source
0

S'il vous est possible d'attribuer un identifiant à votre élément de formulaire (), cette méthode peut être considérée comme une alternative sûre (en particulier lorsque le nom de l'élément de groupe radio n'est pas unique dans le document):

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

HTML:

<form action="#n" name="theForm" id="yourFormId">
MMKarami
la source
-3
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

etc alors utilisez juste

  $("#rdbExamples:checked").val()

Ou

   $('input[name="rdbExampleInfo"]:checked').val();
Jom George
la source
-5
    var value = $('input:radio[name="radiogroupname"]:checked').val();
Ninad Nagwekar
la source