web-dev-qa-db-ger.com

Wie können wir mit dem DOM auf den Wert eines Optionsfelds zugreifen?

Wie können wir mit dem DOM auf den Wert eines Optionsfelds zugreifen?

Zum Beispiel. Wir haben das Optionsfeld als:

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

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

Sie befinden sich in einem Formular mit dem Namen form1. Wenn ich es versuche

document.getElementByName("sex").value

es gibt immer 'männlich' zurück, unabhängig vom überprüften Wert.

javascriptdomradio-button
15
akhil

Um Canavars sehr hilfreiche Funktion zu "generieren":

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

... auf die jetzt so Bezug genommen würde:

getRadioValue('sex');

Seltsam, dass so etwas noch nicht in prototype.js enthalten ist.

20
Canuckster

Wenn Sie das ausgewählte Framework benötigen, unterstützen die meisten Frameworks Funktionen wie diese:

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

Es gibt mehrere Möglichkeiten.

1. Tragen Sie für jede Eingabe eine ID ein

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

Dann können Sie document.getElementById("sex_male") verwenden.

2. Verwenden Sie etwas wie PrototypeJS (jQuery funktioniert auch)

Dann kannst du so etwas machen:

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

Oder sogar das, um nur an den "männlichen" Radioknopf zu kommen:

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

Ein einfacher Einstieg in Prototype besteht aus Google, indem Sie dies zwischen den <head> </ head> -Tags Ihrer Seite einfügen:

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

Sie können den Wert Ihres ausgewählten Radios mit dieser Methode ermitteln: 

<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

Überrascht hat niemand vorgeschlagen, die Selector-API tatsächlich zu verwenden:

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

Browser-Unterstützung ist gut

3
Daniel Worthington-Bodart

Wenn Sie das ausgewählte Array haben möchten, aber kein Framework zur Hand haben, können Sie über das Element-Array iterieren, um das jeweils ausgewählte zu prüfen:

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

Wenn Sie document.form1.sex verwenden, wird ein Array zurückgegeben.

document.form1.sex[0] = erster Auswahlknopf

document.form1.sex[1] = zweites Optionsfeld

Um zu prüfen, was geprüft wird, müssen Sie eine Schleife machen:

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

Du meinst getElementsByName('sex')[0].value? (Es gibt keine getElementByName.)

Dies wird natürlich immer das erste Eingabeelement mit diesem Namen auswählen - dasjenige, dessen Wert tatsächlich männlich ist. Sie prüfen dann, ob es ausgewählt ist, indem Sie die Eigenschaft ".checked" verwenden.

Für diesen einfachen Fall können Sie mit:

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

Für den allgemeinen Fall müssen Sie über jeden Radioeingang eine Schleife machen, um zu sehen, welche Option aktiviert ist. Es ist wahrscheinlich besser, zuerst das Formularobjekt abzurufen (das Einfügen einer ID in das Formular und die Verwendung von document.getElementById ist im Allgemeinen besser als die Verwendung der "name" -basierten document.forms-Auflistung), und dann Zugriff auf form.elements.sex, um die Liste abzurufen , falls auf der Seite andere Elemente mit name="sex"-Attributen vorhanden sind (möglicherweise andere Elemente als Formularfelder).

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

Schleifen können die Aufgabe erfüllen, wie andere gezeigt haben, aber es könnte einfacher sein als Schleifen, was auf Wunsch die Leistung verbessert. Es kann auch tragbar/modular sein, sodass es für verschiedene Funkgruppen verwendet werden kann.

Einfaches Beispiel

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

Ein komplexeres Beispiel: 

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