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

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>

Sie können so etwas tun:

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

<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

Bearbeiten: Vielen Dank an HATCHA und jpsetung für Ihre Bearbeitungsvorschläge.

Dies funktioniert mit jedem Explorer.

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

Dies ist eine einfache Möglichkeit, den Wert eines beliebigen Eingabetyps abzurufen. Sie auch nicht brauchen jQuery Pfad zu enthalten.

document.forms.your-form-name.elements.radio-button-name.value

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

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

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

ECMAScript 6 Version

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

Die einfachste Lösung:

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

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 .

Bearbeiten: Wie von Chips_100 gesagt, sollten Sie verwenden:

var sizes = document.theForm[field];

direkt ohne Verwendung der Testvariablen.

Alte Antwort:

Sollte dir das nicht evalgefallen?

var sizes = eval(test);

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

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

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

Der Code bricht folgendermaßen zusammen:

• Zeile 1: Verweis auf das Steuerelement abrufen, dass (a) ein <input>Typ ist, (b) ein nameAttribut von hatgenderS hat und (c) überprüft wird.
• Zeile 2: Wenn es ein solches Steuerelement gibt, geben Sie seinen Wert zurück. Ist dies nicht der Fall, geben Sie eine leere Zeichenfolge zurück. Die genderSRadioVariable 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 das Optionsfeld zurückgegeben wird, wenn es nicht ausgewählt ist undefined.

Falls jemand nach einer Antwort gesucht hat und wie ich hier gelandet ist, können Sie mit 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);

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

Hier ist ein Beispiel für Radios, bei denen kein Attribut "Checked =" Checked "" 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

Hier ist eine gute Möglichkeit, den Wert des aktivierten Optionsfelds mit einfachem JavaScript abzurufen:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

Quelle: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

Verwenden dieses HTML:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

Sie können auch die Eigenschaft Array Find verwendenchecked , um das markierte Element zu finden:

Array.from(form.elements.characters).find(radio => radio.checked);

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

Nehmen wir an, Sie müssen verschiedene Zeilen von Optionsfeldern in einem Formular platzieren, die jeweils separate Attributnamen ('Option1', 'Option2' usw.), aber denselben Klassennamen haben. Möglicherweise 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 einreichen. 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 gesendet werden soll.

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

Wenn Sie Ihrem Formularelement () eine ID zuweisen können, kann dieser Weg 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">

 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

etc dann einfach benutzen

  $("#rdbExamples:checked").val()

Oder

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

    var value = $('input:radio[name="radiogroupname"]:checked').val();