web-dev-qa-db-fra.com

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

J'ai regardé partout et j'ai tout essayé pour obtenir la valeur sélectionnée à partir d'un groupe de boutons radio. 

Voici mon HTML:

<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate  
</div>

Voici mon .js:

var rates = document.getElementById('rates').value;
var rate_value;
if(rates =='Fixed Rate'){
    rate_value = document.getElementById('r1').value;

}else if(rates =='Variable Rate'){
    rate_value = document.getElementById('r2').value;

}else if(rates =='Multi Rate'){
    rate_value = document.getElementById('r3').value;
}  

document.getElementById('results').innerHTML = rate_value;

Je continue à être indéfini.

javascripthtmlradio-button
255
ZombieBatman
var rates = document.getElementById('rates').value;

L'élément rates est un div; il n'aura donc pas de valeur. C’est probablement de là que vient le undefined.

La propriété checked vous indiquera si l'élément est sélectionné:

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}
201
Joe F

Cela fonctionne dans IE9 et supérieur et dans tous les autres navigateurs.

document.querySelector('input[name="rate"]:checked').value;
390
Parthik Gosar

Vous pouvez obtenir la valeur en utilisant la propriété checked.

var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
        rate_value = rates[i].value;
    }
}
114
Joe

Pour vous, les gens qui vivent sur le bord:

Il existe maintenant quelque chose appelé RadioNodeList et l'accès à sa propriété value retournera la valeur de l'entrée actuellement vérifiée. Cela éliminera la nécessité de filtrer d'abord l'entrée "vérifiée" comme nous le voyons dans de nombreuses réponses postées. 

Exemple de formulaire

<form id="test">
<label><input type="radio" name="test" value="A"> A</label>
<label><input type="radio" name="test" value="B" checked> B</label>
<label><input type="radio" name="test" value="C"> C</label>
</form>

Pour récupérer la valeur cochée, vous pouvez faire quelque chose comme ceci:

var form = document.getElementById("test");
alert(form.elements["test"].value);

Le JSFiddle pour le prouver: http://jsfiddle.net/vjop5xtq/

Veuillez noter que ceci a été implémenté dans Firefox 33 (tous les autres principaux navigateurs semblent le supporter). Les navigateurs plus anciens nécessitent un polfyill pour RadioNodeList pour que cela fonctionne correctement

25
Daniel

Celui qui a fonctionné pour moi est indiqué ci-dessous sur api.jquery.com.

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

JavaScript

var selectedOption = $("input:radio[name=option]:checked").val()

La variable selectedOption contiendra la valeur du bouton radio sélectionné (i.e) o1 ou o2

9
Malathy

Une autre option (apparemment plus ancienne) consiste à utiliser le format suivant: "Document.nameOfTheForm.nameOfTheInput.value;" .____ document.mainForm.rads.value;

document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'You selected: '+radVal;
}
<form id="mainForm" name="mainForm">
    <input type="radio" name="rads" value="1" />
    <input type="radio" name="rads" value="2" />
    <input type="radio" name="rads" value="3" />
    <input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>

Vous pouvez faire référence à l'élément par son nom dans un formulaire. Votre code HTML d'origine ne contient cependant pas d'élément de formulaire.

Fiddle ici (fonctionne dans Chrome et Firefox): https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

9
JHS

Environ un an a passé depuis que la question a été posée, mais j’ai pensé qu’une amélioration substantielle des réponses était possible. Je trouve ce script le plus simple et le plus polyvalent, car il vérifie si un bouton a été coché et, dans l’affirmative, quelle est sa valeur: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Check radio checked and its value</title>
</head>
<body>

    <form name="theFormName">
        <input type="radio" name="theRadioGroupName" value="10">
        <input type="radio" name="theRadioGroupName" value="20">
        <input type="radio" name="theRadioGroupName" value="30">
        <input type="radio" name="theRadioGroupName" value="40">
        <input type="button" value="Check" onclick="getRadioValue('theRadioGroupName')">
    </form>

    <script>
        function getRadioValue(groupName) {
            var radios = theFormName.elements[groupName];
            window.rdValue; // declares the global variable 'rdValue'
            for (var i=0; i<radios.length; i++) {
                var someRadio = radios[i];
                if (someRadio.checked) {
                    rdValue = someRadio.value;
                    break;
                }
                else rdValue = 'noRadioChecked';
            }
            if (rdValue == '10') {
                alert('10'); // or: console.log('10')
            }
            else if (rdValue == 'noRadioChecked') {
                alert('no radio checked');
            }
        }
    </script>
</body>
</html>

Vous pouvez également appeler la fonction dans une autre fonction, comme ceci: 

function doSomething() {
    getRadioValue('theRadioGroupName');
    if (rdValue == '10') {
        // do something
    }
    else if (rdValue == 'noRadioChecked') {
        // do something else
    }  
}
4
Frank Conijn

En supposant que votre élément de formulaire soit désigné par la variable myForm ci-dessous et que vos boutons radio partagent le nom "my-radio-button-group-name", les éléments suivants sont conformes à JavaScript et aux standards (bien que je ne l'aie pas vérifié pour qu'il soit disponible) partout):

myForm.elements.namedItem("my-radio-button-group-name").value

Ce qui précède donnera la valeur d'un élément de bouton radio vérifié (ou sélectionné, comme il est également appelé), le cas échéant, ou null sinon. Le noeud de la solution est la fonction namedItem qui fonctionne spécifiquement avec les boutons radio.

Voir HTMLFormElement.elements , HTMLFormControlsCollection.namedItem et surtout RadioNodeList.value , comme namedItemhabituellement renvoie un objet RadioNodeList.

J'utilise MDN parce qu'il permet de suivre, du moins dans une large mesure, le respect des normes et qu'il est plus facile à comprendre que de nombreuses publications du Groupe de travail et du W3C.

4
amn

Utilisez document.querySelector ('input [type = radio]: cochée'). Value; pour obtenir la valeur de la case à cocher sélectionnée, vous pouvez utiliser d'autres attributs pour obtenir une valeur comme nom = genre etc. s'il vous plaît aller à travers ci-dessous snippet certainement cela vous aidera,} _ 

Solution

document.mainForm.onclick = function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    result.innerHTML = 'You Gender: '+gender;
}
<form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Male" checked/>Male
    <input type="radio" name="gender" value="Female" />Female
    <input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>

Je vous remercie

4
pawan vedak

En Javascript, nous pouvons obtenir les valeurs en utilisant les identifiants "getElementById()" dans le code ci-dessus que vous avez posté a un nom et non un identifiant.

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

utiliser cette valeur de taux en fonction de votre code

4
pradeep

CODE HTML:

<input type="radio" name="rdoName" value="YES"/> <input type="radio" name="rdoName" value="NO"/>

CODE JQUERY:

var value= $("input:radio[name=rdoName]:checked").val();


$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rdoName" value="YES"/> YES
<input type="radio" name="rdoName" value="NO"/> NO
<br/>
<input type="button"id="btnSubmit"value="Which one Selected"/>

Tu auras

value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"
3
user8590818

appeler plusieurs fois un bouton radio vous donne la valeur du bouton PREMIER, pas le bouton VÉRIFIÉ. au lieu de passer en boucle par les boutons radio pour voir lequel est coché, je préfère appeler une fonction javascript onclick qui définit une variable qui peut ensuite être récupérée à volonté.

<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >

qui appelle:

var currentValue = 0;
function handleClick(myRadio) {
    currentValue = myRadio.value;
    document.getElementById("buttonSubmit").disabled = false; 
}

avantage supplémentaire étant que je peux traiter des données et/ou réagir à la vérification d'un bouton (dans ce cas, activer le bouton SUBMIT).

3
tony gil

Une amélioration aux fonctions suggérées précédemment:

function getRadioValue(groupName) {
    var _result;
    try {
        var o_radio_group = document.getElementsByName(groupName);
        for (var a = 0; a < o_radio_group.length; a++) {
            if (o_radio_group[a].checked) {
                _result = o_radio_group[a].value;
                break;
            }
        }
    } catch (e) { }
    return _result;
}
2
Dave

Vous pouvez utiliser .find() pour sélectionner l'élément vérifié:

var radio = Array.from(document.querySelectorAll('#rate input'))

var value = radio.length && radio.find(r => r.checked).value
1
Yukulélé

Utilisez simplement: document.querySelector('input[rate][checked]').value

1
mahdavipanah

Mon point de vue sur ce problème avec le javascript pur est de trouver le noeud vérifié, de trouver sa valeur et de le sortir du tableau.

var Anodes = document.getElementsByName('A'),
    AValue = Array.from(Anodes)
       .filter(node => node.checked)
       .map(node => node.value)
       .pop();
console.log(AValue);

Notez que j'utilise les fonctions flèche . Voir ce violon pour un exemple pratique.

1
pongi

   var rates=document.getElementsByName("rate");
            for (i = 0; i < rates.length; i++) {
            if (rates[i].checked) {
              console.log(rates[i].value);
              rate=rates[i].value;
              document.getElementById("rate").innerHTML = rate;
              alert(rate);
              
            }
          }
        <div id="rates">
          <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
          <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
          <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate  
        </div>
        </br>
        <div id='rate'>
        </div>

0
Bishnu Kumar Roy

Si vous utilisez la variable JQuery, veuillez utiliser l'extrait ci-dessous pour le groupe de boutons radio.

var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();
0
Surendra K
<form id="rates">
  <input type="radio" name="rate" value="Fixed Rate"> Fixed
  <input type="radio" name="rate" value="Variable Rate"> Variable
  <input type="radio" name="rate" value="Multi Rate" checked> Multi
</form>

puis...

var rate_value = rates.rate.value;
0
user7420100

J'ai utilisé la fonction jQuery.click pour obtenir le résultat souhaité:

$('input[name=rate]').click(function(){
  console.log('Hey you clicked this: ' + this.value);

  if(this.value == 'Fixed Rate'){
    rate_value = $('#r1').value;
  } else if(this.value =='Variable Rate'){
   rate_value = $('#r2').value;
  } else if(this.value =='Multi Rate'){
   rate_value = $('#r3').value;
  }  

  $('#results').innerHTML = rate_value;
});

J'espère que ça aide.

0
Animesh Singh

Si les boutons sont dans un formulaire
var myform = new FormData(getformbywhatever); myform.get("rate");
QuerySelector ci-dessus est une meilleure solution. Cependant, cette méthode est facile à comprendre, surtout si vous n’avez pas la moindre idée de CSS. De plus, les champs de saisie sont de toute façon susceptibles de se trouver dans un formulaire.
N'a pas vérifié, il existe d'autres solutions similaires, désolé pour la répétition

0
Kun Wang
var rates = document.getElementById('rates').value;

ne peut pas obtenir les valeurs d'un bouton radio comme ça utiliser à la place

rate_value = document.getElementById('r1').value;
0
James Cluade

vérifier la valeur par ID:

var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;
0
Nabeel Iqbal

En php c'est très facile
html page

Male<input type="radio" name="radio" value="male"><br/>
Female<input type="radio" name="radio" value="female"><br/>
Others<input type="radio" name="radio" value="other"><br/>
<input type="submit" value="submit">

Prendre de la valeur de la forme au php

$radio=$_POST['radio'];<br/>
use php if(isset($_POST['submit']))<br/>
{<br/>
echo "you selected".$radio."thank u";<br/>
}
0
Kavya Hanumantharaju