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

316

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

ZombieBatman
la source
50
Vous n'utilisez pas jQuery ici, mais si vous le souhaitez, vous pouvez utiliser ceci:$("input[type='radio'][name='rate']:checked").val();
GJK
Pourquoi ne pouvez-vous pas inspecter cet objet? Quoi qu'il en soit, vous devez utiliser.checked
Amol M Kulkarni
Je ne sais pas si cela est requis ou non, mais c'est une bonne habitude de mettre des boutons radio dans un <form></form>conteneur.
Kamil

Réponses:

239
var rates = document.getElementById('rates').value;

L'élément taux est un div, il n'aura donc pas de valeur. C'est probablement d'où undefinedvient le.

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

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}
Joe F
la source
229
En jquery ce serait$("input[name=rate]:checked").val()
Kamran Ahmed
1
Je ne comprends pas, y a-t-il deux éléments avec le même identifiant?
mzalazar
3
@mzalazar Non, chaque bouton radio a son propre identifiant mais tous ont le même nom, ce qui les place dans un groupe, donc si vous en sélectionnez un, l'autre est désélectionné. Avec la réponse de Kamran Ahmed, vous pouvez vérifier lequel des boutons radio du groupe est sélectionné et obtenir uniquement la valeur de celle sélectionnée (cochée).
Broco
4
Le code de mahdavipanah juste au-dessus (avec [checked]) recherche l' attribut (c'est-à-dire l'état initial). Vous devriez plutôt utiliser :checked, qui recherche la propriété (c'est-à-dire l'état actuel), et qui est presque toujours ce que vous voulez.
Gras Double
5
En Javascript, ce seraitdocument.querySelectorAll("input[name=rate]:checked")[0].value
Vincent McNabb
521

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

document.querySelector('input[name="rate"]:checked').value;
Parthik Gosar
la source
13
Bien sûr, vous devrez vérifier si querySelector renvoie null. C'est le cas si aucun bouton radio n'est coché.
Robert
18
@KamranAhmed: Votre solution jQuery a un coût beaucoup plus élevé.
5
ParthikGosar: IE8 ne prend pas en charge le :checkedsélecteur.
14
Notez que les guillemets autour ratene sont pas requis.
mbomb007
1
@KamranAhmed jusqu'à ce que et à moins que vous ne puissiez profiler ce qui précède et / ou inspecter l'implémentation derrière l'appel, vous ne pouvez pas en dire plus sur les performances de ce qui précède que vous ne pouvez dire sur tout autre oneliner qui appelle du code natif. Nous n'avons pas suffisamment d'informations pour spéculer sur la façon dont le navigateur parvient à localiser les :checkedéléments - peut-être qu'il a tout "haché et mis en cache" et c'est une O(1)opération. À moins que vous ne l'ayez profilé pour indiquer quelque chose comme le temps de requête augmente avec le nombre d'éléments sur la page, ou à moins que vous compreniez le code source du navigateur derrière, vous ne pouvez pas le dire.
amn
144

Vous pouvez obtenir la valeur en utilisant la checkedpropriété.

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;
    }
}
Joe
la source
13
Étant donné qu'une seule radio peut être vérifiée, je m'attends normalement à ce qu'une instruction breakor returnà l'intérieur du ifbloc arrête les passages supplémentaires dans la boucle. Un petit point, mais bon style.
RobP
1
Il s'agit de l'implémentation vanille la plus propre pour cette question. Gloire!
SeaWarrior404
37

Pour vous les personnes vivant à la limite:

Il y a 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 supprimera la nécessité de filtrer d'abord l'entrée «vérifiée» comme nous le voyons dans de nombreuses réponses publié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 vérifié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 cela a été implémenté dans Firefox 33 (tous les autres principaux navigateurs semblent le prendre en charge). Les navigateurs plus anciens auront besoin d'un polfyill pour RadioNodeListque cela fonctionne correctement

Daniel
la source
1
form.elements["test"].valuefonctionne très bien dans Chrome [Version 49.0.2623.87 m].
Evan Hu
Ce doit être un formulaire, ne peut pas utiliser par exemple un div. Sinon, cela fonctionne dans FF 71.0.
Andrew
16

Celui qui a fonctionné pour moi est donné 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é (ie) o1 ou o2

Malathie
la source
11

Une autre option (apparemment plus ancienne) consiste à utiliser le format: "document.nameOfTheForm.nameOfTheInput.value;" par exemple 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.

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

JHS
la source
1
Il s'agit du format DOM hérité beaucoup plus ancien et ne devrait vraiment plus être utilisé car il est limité à certains éléments et ne suit pas les normes actuelles.
j08691
@ j08691 Ah d'accord merci de me le faire savoir. C'est l'une des choses que j'ai apprises en classe universitaire. Il est probablement préférable de ne rien faire confiance à partir de là et d'utiliser simplement des références en ligne à la place.
JHS
6
"... ne suit pas le rythme des normes actuelles." n'est pas un argument convaincant. Veuillez développer. Si ça marche ça marche. C'est également moins de lignes que la réponse acceptée qui détermine uniquement si l'option sélectionnée est «Taux fixe».
zéros et uns
Le violon ci-dessus ne semble pas fonctionner avec le navigateur Safari (7.1.4). La valeur s'affiche comme non définie, la modification des états des boutons radio n'affecte pas cela.
Stuart R. Jefferys
Oui, cela ne fonctionne pas non plus avec le navigateur Edge (40.15063.0.0). S'ils sont obsolètes de cette façon, cela semble étrange, car cette manière est plus simple et logique car les boutons radio sont regroupés par nature. La plupart des autres réponses ont l'air de cocher des cases.
mikato
10

Utilisez document.querySelector ('entrée [type = radio]: cochée'). Valeur; pour obtenir la valeur de la case à cocher sélectionnée, vous pouvez utiliser d'autres attributs pour obtenir une valeur telle que nom = sexe, etc. veuillez consulter l' extrait ci-dessous, cela vous sera certainement utile,

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

pawan vedak
la source
7

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"

la source
5

En Javascript, nous pouvons obtenir les valeurs en utilisant l'ID " getElementById()" dans le code ci-dessus que vous avez publié contient un nom et non un ID afin que vous puissiez modifier comme ceci

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

utilisez cette rate_value selon votre code

pradeep
la source
5

Un an environ s'est écoulé depuis que la question a été posée, mais je pensais qu'une amélioration substantielle des réponses était possible. Je trouve que c'est le script le plus simple et le plus polyvalent, car il vérifie si un bouton a été vérifié, et si oui, 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
    }  
} 
Frank Conijn
la source
5

En supposant que votre élément de formulaire est référencé par la myFormvariable ci-dessous et que vos boutons radio partagent le nom "my-radio-button-group-name", ce qui suit est pur JavaScript et conforme aux normes (bien que je ne l'ai pas vérifié pour être 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 coché (ou sélectionné, comme on l'appelle également), le cas échéant, ou nullautrement. Le nœud de la solution est lenamedItem fonction qui fonctionne spécifiquement avec les boutons radio.

Voir HTMLFormElement.elements , HTMLFormControlsCollection.namedItem et surtout RadioNodeList.value , car renvoie namedItem généralement un RadioNodeListobjet.

J'utilise MDN parce qu'il permet de suivre la conformité aux normes, au moins dans une large mesure, et parce qu'il est plus facile à comprendre que de nombreuses publications WhatWG et W3C.

amn
la source
Quand j'ai écrit la réponse, j'ai parcouru les réponses existantes et je n'ai rien vu qui ressemblait à ce que je voulais partager. Maintenant, je vois que j'ai raté au moins deux solutions similaires. Bien que personne n'ait écrit sa suggestion de code en utilisant la syntaxe particulière que j'emploie, mais l'idée générale est la même. Pour info. Le but est d'obtenir la référence à un RadioNodeListpar quelque chose comme form.elements[name]ou form[name](peut-être, une spéculation) ou par ma syntaxe ci-dessus.
amn
3

appeler plusieurs fois un bouton radio vous donne la valeur du premier bouton, pas du bouton VÉRIFIÉ. au lieu de parcourir les boutons radio pour voir lequel est coché, je préfère appeler une onclickfonction javascript qui définit une variable qui peut être récupérée ultérieurement à 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; 
}

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

Tony Gil
la source
5
vous devez onchangeplutôt lier l' événement, dans le cas où l'utilisateur utilise un clavier.
John Dvorak
2

Une amélioration par rapport aux fonctions proposé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;
}
Dave
la source
2

Mon point de vue sur ce problème avec le javascript pur est de trouver le nœud 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échées . Voir ce violon pour un exemple de travail.

pongi
la source
J'ajouterais une tagName === 'INPUT'vérification pour m'assurer que vous ne travaillez sur aucune balise autre que input.
Aternus
1

Si vous utilisez jQuery:

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

Senthil Kumar Thangavel
la source
1

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

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

var value = radio.length && radio.find(r => r.checked).value
Yukulélé
la source
1
Je ne connaissais pas Array.find, j'adore! Mais cela casserait si aucun élément n'est vérifié.
pongi
0
<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;
user7420100
la source
Pouvez-vous expliquer comment cela répond à la question?
sonslikeodd
" obtenir la valeur sélectionnée à partir d'un groupe de boutons radio ": rates.rate.valuenonrates.value
user7420100
Ceci est une bonne réponse. document.getElementById("rates").rate.value[ou]document.forms[0].rate.value
Atika
0

vérifier la valeur par ID:

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

J'ai utilisé la fonction jQuery.click pour obtenir la sortie souhaitée:

$('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.

Animesh Singh
la source
0

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 aucune idée de CSS. De plus, les champs de saisie sont très probablement sous une forme de toute façon.
N'a pas vérifié, il existe d'autres solutions similaires, désolé pour la répétition

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

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

rate_value = document.getElementById('r1').value;
James Cluade
la source
pour obtenir les valeurs d'une balise HTML, utilisez document.getElementById ('r1'). innerHtml
James Cluade
0

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

var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();
Surendra K
la source
0

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

mahdavipanah
la source
N'a pas travaillé pour moi; voir une syntaxe similaire ci-dessus de Pawan qui l'a fait. Comme dans,document.querySelector('input[name = rate]:checked').value
Tim Erickson
0

   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>

Bishnu Kumar Roy
la source
0

Vous pouvez également parcourir les boutons avec une boucle forEach sur les éléments

    var elements = document.getElementsByName('radioButton');
    var checkedButton;
    console.log(elements);
    elements.forEach(e => {
        if (e.checked) {
            //if radio button is checked, set sort style
            checkedButton = e.value;
        }
    });
Adrian Andersen
la source
-1

https://codepen.io/anon/pen/YQxbZJ

Le HTML

<div id="rates">
<input type="radio" id="x1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="x2" name="rate" value="Variable Rate" 
checked="checked"> Variable Rate
<input type="radio" id="x3" name="rate" value="Multi Rate" > Multi Rate
</div>

<button id="rdio"> Check Radio </button>
<div id="check">

</div>

Le JS

var x ,y;
var x = document.getElementById("check");
function boom()
{
if (document.getElementById("x1").checked)
  y = document.getElementById("x1").value;

else if(document.getElementById("x2").checked)
  y = document.getElementById("x2").value;

else if (document.getElementById("x3").checked)
  y = document.getElementById("x3").value;
else
  y = "kuch nhi;"
x.innerHTML = y;
}

var z = document.getElementById('rdio');
z.addEventListener("click", boom);`
Anshu
la source
-2

En php c'est une
page html très simple

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

Transformez la forme en php

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