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

Question

Je veux obtenir la valeur sélectionnée dans 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 mes 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 n'arrête pas d'avoir des indéfinis.

Answer 1

Cela fonctionne dans IE9 et plus et dans tous les autres navigateurs.

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

Answer 2

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

L'élément de taux est un div Il n'aura donc pas de valeur. C'est probablement là que le undefined vient de.

Le site checked vous indiquera si l'élément est sélectionné :

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

Ou

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

Answer 3

Vous pouvez obtenir la valeur en utilisant la fonction checked proprié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;
    }
}

Answer 4

Pour vous, qui vivez sur le fil du rasoir :

Il existe maintenant quelque chose appelé RadioNodeList et l'accès à sa propriété value renverra la valeur de l'entrée actuellement cochée. Ainsi, il ne sera plus nécessaire de filtrer d'abord l'entrée "cochée", comme c'est le cas 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 pourriez 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 cette fonctionnalité a été mise en œuvre dans Firefox 33 (tous les autres navigateurs majeurs semblent la supporter). Les navigateurs plus anciens nécessiteront un polfyill pour la fonction RadioNodeList pour que cela fonctionne correctement

Answer 5

En Javascript, nous pouvons obtenir les valeurs en utilisant l'identifiant " getElementById() "dans le code que vous avez posté ci-dessus contient le nom et non pas l'identité. donc vous devez modifier comme ceci

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

utilisez cette valeur de taux en fonction de votre code