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

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.

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

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

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

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

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

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

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/

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

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"

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

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

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.

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

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

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.

Si vous utilisez jQuery:

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

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

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

vérifier la valeur par ID:

var CheckedValues = ($("#r1").is(':checked')) ? 1 : 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.

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

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;

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();

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

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

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);`

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