web-dev-qa-db-fra.com

Comment pouvons-nous accéder à la valeur d'un bouton radio en utilisant le DOM?

Comment pouvons-nous accéder à la valeur d'un bouton radio en utilisant le DOM?

Pour par exemple. nous avons le bouton radio comme:

<input name="sex" type="radio" value="male">

<input name="sex" type="radio" value="female">

Ils sont dans un formulaire avec le nom form1. Quand j'essaye

document.getElementByName("sex").value

il retourne 'mâle' toujours quelle que soit la valeur cochée.

javascriptdomradio-button
15
akhil

Juste pour "générer" la fonction très utile de Canavar:

function getRadioValue(theRadioGroup)
{
    var elements = document.getElementsByName(theRadioGroup);
    for (var i = 0, l = elements.length; i < l; i++)
    {
        if (elements[i].checked)
        {
            return elements[i].value;
        }
    }
}

... qui serait maintenant référencé comme suit:

getRadioValue('sex');

Étrange que quelque chose comme ça ne fasse pas déjà partie de prototype.js.

20
Canuckster

Si vous avez besoin de celui sélectionné, la plupart des frameworks supportent des fonctionnalités telles que:

//jQuery
$("input[name='sex']:checked").val()
9
ericteubert

Il y a deux façons.

1. Mettez un identifiant sur chaque entrée

<input name="sex" id="sex_male" type="radio" value="male">
<input name="sex" id="sex_female" type="radio" value="female">

Ensuite, vous pouvez utiliser document.getElementById("sex_male")

2. Utilisez quelque chose comme PrototypeJS (jQuery fonctionne aussi)

Ensuite, vous pouvez faire quelque chose comme ça:

//This loops over all input elements that have a name of "sex"
$$('input[name="sex"]').each( function(elem) {
  //Do something
});

Ou même ceci pour obtenir juste le bouton radio "masculin":

$$('input[name="sex"][value="male"]').each(function(elem) {
  //Do something
});

Un moyen simple de se familiariser avec Prototype est de l'inclure à partir de Google en l'ajoutant entre les balises <head> </ head> de votre page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
7
Mark Biek

Vous pouvez obtenir la valeur de votre radio sélectionnée par cette méthode: 

<script>
function getRadioValue()
{
    for (var i = 0; i < document.getElementsByName('sex').length; i++)
    {
        if (document.getElementsByName('sex')[i].checked)
        {
            return document.getElementsByName('sex')[i].value;
        }
    }
}
</script>
6
Canavar

Surpris, personne n'a suggéré d'utiliser réellement l'API Selector:

document.querySelector('input[name=sex]:checked').value

Le support du navigateur est bon

3
Daniel Worthington-Bodart

Si vous voulez le choix mais que vous n'avez pas de framework, vous pouvez parcourir le tableau d'éléments en recherchant celui qui est coché:

for (var i = 0; i < document.form1.sex.length; i++) {
    if (document.form1.sex[i].checked) alert(document.form1.sex[i].value);
}
2
Jarret Hardie

Si vous utilisez document.form1.sex, vous obtenez un tableau.

document.form1.sex[0] = premier bouton radio

document.form1.sex[1] = deuxième bouton radio

Pour vérifier lequel est coché, vous devez boucler:

whoChecked(document.form1.sex)

function whoChecked(fieldName) {
   for(var x=0;x<fieldName.length;x++) {
     if(fieldName[x].checked) {
        return fieldname[x].value
     }
}
1
Diodeus - James MacFarlane
var list = document.getElementsByName('sex');
for(var i=0;i<list.length;i++){
   if(list[i].type=='radio' && list[i].checked){
      alert(list[i].value);
      break;
   }
}
1
Manu
document.getElementByName("sex").value

Vous voulez dire getElementsByName('sex')[0].value? (Il n'y a pas getElementByName.)

Bien entendu, cela choisira toujours le premier élément d’entrée portant ce nom - celui dont la valeur est bien masculine. Vous vérifiez ensuite s’il est sélectionné à l’aide de la propriété ".checked".

Pour ce cas simple, vous pouvez vous en tirer avec:

var sex= document.getElementsByName("sex")[0].checked? 'male' : 'female';

Pour le cas général, vous devez boucler chaque entrée radio pour voir laquelle est cochée. Il serait probablement préférable d’obtenir d’abord l’objet formulaire (il est généralement préférable d’utiliser un identifiant et d’utiliser document.getElementById plutôt que d’utiliser la collection document.forms basée sur le nom), puis d’accéder à form.elements.sex pour obtenir la liste. , s’il existe d’autres éléments sur la page ayant les attributs name="sex" (potentiellement autres que des champs de formulaire).

1
bobince
function getEleByName(){
    if(true==document.getElementsByName('gender')[0].checked){
        alert('selected gender is: male');
    }
    else{
        alert('selected gender is: female');
    }
}
1
LN G
  • document.all.sex [0] .checked 
  • document.all.set [1] .checked
0
Yundong Cai

Les boucles peuvent accomplir la tâche, comme d'autres l'ont montré, mais cela pourrait être plus simple que d'utiliser une boucle, ce qui améliorera les performances si vous le souhaitez. En outre, il peut être portable/modulaire afin de pouvoir être utilisé pour différents groupes de radio.

Exemple simple

function getValue(x) {
  alert(x.value);
}
<input name="sex" type="radio" value="male" onChange="getValue(this)" />
<input name="sex" type="radio" value="female" onChange="getValue(this)" />

Un exemple plus complexe: 

function getValue(x){
  alert(x.value);
}
<fieldset>
  <legend>Sex</legend>
  <label>Male:
    <input name="sex" type="radio" value="male" onChange="getValue(this)"/>
  </label>
  <label>Female:
    <input name="sex" type="radio" value="female" onChange="getValue(this)" />
  </label>
</fieldset>
<fieldset>
  <legend>Age Group</legend>
  <label>0-13:
    <input name="ageGroup" type="radio" value="0-13" onChange="getValue(this)" />
  </label>
  <label>13-18:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>18-30:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>30+:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
</fieldset>

0
CrandellWS