web-dev-qa-db-fra.com

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

J'ai un problème étrange avec mon programme JS. Je fonctionnais correctement, mais pour une raison quelconque, cela 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 continue de retourner 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>
javascripthtmlfor-loopradio-button
225
mkyong

JavaScript:

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

http://jsfiddle.net/Xxxd3/610/

Edit: Merci HATCHA et jpsetung pour vos suggestions de montage.

365
jbabey

Cela fonctionne avec n'importe quel explorateur.

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

C'est le moyen le plus pur d'obtenir la valeur de tout type d'entrée. Vous faites également pas vous devez inclure le chemin jQuery.

231
Giorgos Tsakonas
document.forms.your-form-name.elements.radio-button-name.value
22
imran ansari

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

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

Ce n'est plus $('input[@name="genderS"]:checked').val(); qui fonctionnait dans jQuery 1.7 (avec le @).

17
jptsetung

La solution la plus simple:

 document.querySelector('input[name=genderS]:checked').value
16
Bobur Saidov

Version ECMAScript 6

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

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 .

7
The Alpha

Edit: Comme le dit Chips_100, vous devriez utiliser:

var sizes = document.theForm[field];

directement sans utiliser la variable de test.

Ancienne réponse:

Ne devriez-vous pas eval comme ça?

var sizes = eval(test);

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

6
Michael Laffargue

Si quelqu'un cherchait une réponse et atterrissait ici comme moi, à partir de Chrome 34 et de Firefox 33, vous pouvez effectuer les opérations suivantes:

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

ou plus simple:

alert(document.theForm.genderS.value);

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

4
ashraf aaref
 document.querySelector('input[name=genderS]:checked').value
3
alluma

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 un 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: référence au contrôle que (a) est un type <input>, (b) a un attribut name de genderS et que (c) est vérifié.
  • Ligne 2: Si un tel contrôle existe, retournez sa valeur. S'il n'y en a pas, retourne une chaîne vide. La variable genderSRadio est vérité 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 retournera undefined.

3
Ed Gibbs

Voici un exemple pour les radios où aucun attribut coché = "coché" 

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

DÉMO: 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

2
Code Spy

En utilisant du javascript pur, vous pouvez gérer la référence à l'objet qui a envoyé l'événement.

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

supposons que vous deviez placer différentes rangées de boutons radio dans un formulaire, chacune avec des noms d'attribut distincts ('option1', 'option2' etc.) mais le même nom de classe. Vous en avez peut-être besoin sur plusieurs lignes, où ils soumettront chacun une valeur basée sur une échelle de 1 à 5 correspondant à une question. vous pouvez écrire votre javascript comme suit:

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

J'insérerais également le résultat final dans un élément de formulaire masqué à soumettre avec le formulaire.

1
Bruce Tong

S'il vous est possible d'attribuer un ID à 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">
0
MMKarami