webentwicklung-frage-antwort-db.com.de

Wie erhalte ich den Wert des ausgewählten Optionsfelds?

Ich habe ein seltsames Problem mit meinem JS-Programm. Ich hatte das Problem, aber aus irgendeinem Grund funktioniert es nicht mehr. Ich möchte nur den Wert des Optionsfelds (welches ausgewählt ist) finden und es in eine Variable zurückgeben. Aus irgendeinem Grund wird immer wieder undefined zurückgegeben.

Hier ist mein Code:

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

submitForm:

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

HTML:

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>
225
mkyong

JavaScript:

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++)
{
 if (radios[i].checked)
 {
  // do whatever you want with the checked radio
  alert(radios[i].value);

  // only one radio can be logically checked, don't check the rest
  break;
 }
}

http://jsfiddle.net/Xxxd3/610/

Edit: Danke HATCHA und jpsetung für deine Editiervorschläge.

365
jbabey

Dies funktioniert mit jedem Explorer.

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

Dies ist die reinste Methode, um den Wert eines beliebigen Eingabetyps abzurufen. Sie müssen auch nicht den jQuery-Pfad angeben.

231
document.forms.your-form-name.elements.radio-button-name.value
22
imran ansari

Seit jQuery 1.8 lautet die korrekte Syntax für die Abfrage

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

Nicht mehr $('input[@name="genderS"]:checked').val();, was in jQuery 1.7 funktionierte (mit dem @).

17
jptsetung

Die einfachste Lösung:

 document.querySelector('input[name=genderS]:checked').value
16
Bobur Saidov

ECMAScript 6 Version

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;
14
Nappy

Versuche dies

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;
    alert(sizes);
    for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}


function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
    return false;
}

Eine Geige hier .

7
The Alpha

Bearbeiten: Wie von Chips_100 gesagt, sollten Sie verwenden:

var sizes = document.theForm[field];

direkt ohne Verwendung der Testvariablen.


Alte Antwort:

Sollten Sie eval nicht so?

var sizes = eval(test);

Ich weiß nicht, wie das funktioniert, aber für mich kopieren Sie nur eine Zeichenfolge.

6

Falls jemand nach einer Antwort gesucht hat und wie ich hier gelandet ist, können Sie unter Chrome 34 und Firefox 33 Folgendes tun:

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

oder einfacher:

alert(document.theForm.genderS.value);

referenz: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

4
ashraf aaref
 document.querySelector('input[name=genderS]:checked').value
3
alluma

Dies ist reines JavaScript, basierend auf der Antwort von @Fontas, aber mit Sicherheitscode, um eine leere Zeichenfolge zurückzugeben (und ein TypeError zu vermeiden), wenn kein Optionsfeld ausgewählt ist:

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

Der Code gliedert sich wie folgt:

  • Zeile 1: Erhalten Sie einen Verweis auf das Steuerelement, dass (a) ein <input> -Typ ist, (b) ein name -Attribut von genderS hat und (c) aktiviert ist.
  • Zeile 2: Wenn es ein solches Steuerelement gibt, geben Sie dessen Wert zurück. Ist dies nicht der Fall, geben Sie eine leere Zeichenfolge zurück. Die Variable genderSRadio ist wahr, wenn Zeile 1 das Steuerelement findet, und null/falsey, wenn dies nicht der Fall ist.

Verwenden Sie für JQuery die Antwort von @ jbabey und beachten Sie, dass, wenn kein Optionsfeld ausgewählt ist, undefined zurückgegeben wird.

3
Ed Gibbs

Hier ist ein Beispiel für Radios, bei denen kein Checked = "checked" Attribut verwendet wird

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

DEMO: http://jsfiddle.net/ipsjolly/hgdWp/2/ [ Klicken Sie auf Suchen, ohne ein Radio auszuwählen ]

Quelle: http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

2
Code Spy

Mit einem reinen Javascript können Sie den Verweis auf das Objekt verarbeiten, das das Ereignis ausgelöst hat.

function (event) {
    console.log(event.target.value);
}
1
antonjs

nehmen wir an, Sie müssen in einem Formular verschiedene Reihen von Optionsfeldern mit unterschiedlichen Attributnamen ('Option1', 'Option2' usw.), aber demselben Klassennamen platzieren. Vielleicht benötigen Sie sie in mehreren Zeilen, in denen sie jeweils einen Wert basierend auf einer Skala von 1 bis 5 für eine Frage übermitteln. Sie können Ihr Javascript so schreiben:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

Ich würde auch die endgültige Ausgabe in ein verstecktes Formularelement einfügen, das zusammen mit dem Formular eingereicht werden soll.

1
Bruce Tong

Wenn es Ihnen möglich ist, eine ID für Ihr Formularelement () zuzuweisen, kann diese Methode als sichere Alternative angesehen werden (insbesondere, wenn der Name des Funkgruppenelements im Dokument nicht eindeutig ist):

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

HTML:

<form action="#n" name="theForm" id="yourFormId">
0
MMKarami