Wie erhalte ich den Wert des ausgewählten Optionsfelds?

Ich möchte den ausgewählten Wert aus einer Gruppe von Optionsfeldern abrufen.

Hier ist mein 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>

Hier ist meine .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;

Ich werde immer undefiniert.

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

Das Ratenelement ist a div, hat also keinen Wert. Dies ist wahrscheinlich, woher das undefinedkommt.

Die checkedEigenschaft gibt an, ob das Element ausgewählt ist:

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

Dies funktioniert in IE9 und höher und allen anderen Browsern.

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

Sie können den Wert mithilfe der checkedEigenschaft abrufen.

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

Für Sie Menschen, die am Rande leben:

Es gibt jetzt eine sogenannte RadioNodeList . Wenn Sie auf die value-Eigenschaft zugreifen, wird der Wert der aktuell überprüften Eingabe zurückgegeben. Dadurch entfällt die Notwendigkeit, zuerst die "überprüfte" Eingabe herauszufiltern, wie wir in vielen der veröffentlichten Antworten sehen.

Beispielformular

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

Um den überprüften Wert abzurufen, können Sie Folgendes tun:

var form = document.getElementById("test");
alert(form.elements["test"].value);

Die JSFiddle, um es zu beweisen: http://jsfiddle.net/vjop5xtq/

Bitte beachten Sie, dass dies in Firefox 33 implementiert wurde (alle anderen wichtigen Browser scheinen dies zu unterstützen). Ältere Browser benötigen ein Polfyill, RadioNodeListdamit dies ordnungsgemäß funktioniert

Diejenige, die für mich gearbeitet hat, ist unten von api.jquery.com angegeben.

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

JavaScript

var selectedOption = $("input:radio[name=option]:checked").val()

Die Variable selectedOption enthält den Wert des ausgewählten Optionsfelds (dh) o1 oder o2

Eine andere (anscheinend ältere) Option ist die Verwendung des Formats: "document.nameOfTheForm.nameOfTheInput.value;" zB document.mainForm.rads.value;

document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'You selected: '+radVal;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="rads" value="1" />
    <input type="radio" name="rads" value="2" />
    <input type="radio" name="rads" value="3" />
    <input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>

Sie können auf das Element anhand seines Namens in einem Formular verweisen. Ihr ursprünglicher HTML-Code enthält jedoch kein Formularelement.

Geige hier (funktioniert in Chrome und Firefox): https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

Verwenden Sie document.querySelector ('Eingabe [Typ = Radio]: Aktiviert'). Value; Um den Wert des ausgewählten Kontrollkästchens zu erhalten, können Sie andere Attribute verwenden, um den Wert wie Name = Geschlecht usw. zu erhalten. Bitte gehen Sie das folgende Snippet durch. Es wird Ihnen definitiv helfen.

Lösung

document.mainForm.onclick = function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    result.innerHTML = 'You Gender: '+gender;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Male" checked/>Male
    <input type="radio" name="gender" value="Female" />Female
    <input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>

Danke

HTML QUELLTEXT:

<input type="radio" name="rdoName" value="YES"/> <input type="radio" name="rdoName" value="NO"/>

JQUERY CODE:

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

$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rdoName" value="YES"/> YES
<input type="radio" name="rdoName" value="NO"/> NO
<br/>
<input type="button"id="btnSubmit"value="Which one Selected"/>

Sie erhalten

value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"

In Javascript können wir die Werte erhalten, indem wir die IDs " getElementById()" in dem oben angegebenen Code verwenden, der den Namen und nicht die ID enthält, sodass Sie ihn wie folgt ändern können

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

Verwenden Sie diesen rate_value gemäß Ihrem Code

Etwa ein Jahr ist vergangen, seit die Frage gestellt wurde, aber ich hielt eine wesentliche Verbesserung der Antworten für möglich. Ich finde das Skript am einfachsten und vielseitigsten, da es prüft, ob eine Schaltfläche überprüft wurde und wenn ja, welchen Wert sie hat:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Check radio checked and its value</title>
</head>
<body>

    <form name="theFormName">
        <input type="radio" name="theRadioGroupName" value="10">
        <input type="radio" name="theRadioGroupName" value="20">
        <input type="radio" name="theRadioGroupName" value="30">
        <input type="radio" name="theRadioGroupName" value="40">
        <input type="button" value="Check" onclick="getRadioValue('theRadioGroupName')">
    </form>

    <script>
        function getRadioValue(groupName) {
            var radios = theFormName.elements[groupName];
            window.rdValue; // declares the global variable 'rdValue'
            for (var i=0; i<radios.length; i++) {
                var someRadio = radios[i];
                if (someRadio.checked) {
                    rdValue = someRadio.value;
                    break;
                }
                else rdValue = 'noRadioChecked';
            }
            if (rdValue == '10') {
                alert('10'); // or: console.log('10')
            }
            else if (rdValue == 'noRadioChecked') {
                alert('no radio checked');
            }
        }
    </script>
</body>
</html>

Sie können die Funktion auch in einer anderen Funktion aufrufen:

function doSomething() {
    getRadioValue('theRadioGroupName');
    if (rdValue == '10') {
        // do something
    }
    else if (rdValue == 'noRadioChecked') {
        // do something else
    }  
} 

Angenommen, Ihr Formularelement wird myFormunten von einer Variablen referenziert und Ihre Optionsfelder haben den Namen "Mein-Optionsfeld-Gruppenname". Das Folgende ist rein JavaScript- und standardkonform (obwohl ich nicht überprüft habe, dass es überall verfügbar ist ):

myForm.elements.namedItem("my-radio-button-group-name").value

Das Obige ergibt den Wert eines aktivierten (oder ausgewählten, wie es auch genannt wird) Optionsfeldelements, falls vorhanden oder auf nullandere Weise. Der Kern der Lösung ist die namedItemFunktion, die speziell mit Optionsfeldern funktioniert.

Siehe HTMLFormElement.elements , HTMLFormControlsCollection.namedItem und insbesondere RadioNodeList.value , da namedItem normalerweise ein RadioNodeListObjekt zurückgegeben wird.

Ich verwende MDN, weil man damit zumindest weitgehend die Einhaltung von Standards verfolgen kann und weil es einfacher zu verstehen ist als viele WhatWG- und W3C-Veröffentlichungen.

Wenn Sie ein Optionsfeld mehrmals direkt aufrufen, erhalten Sie den Wert der Taste FIRST und nicht der Taste CHECKED. Anstatt Optionsfelder zu durchlaufen, um zu sehen, welches aktiviert ist, rufe ich lieber eine onclickJavascript-Funktion auf, die eine Variable festlegt, die später nach Belieben abgerufen werden kann.

<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >

was ruft:

var currentValue = 0;
function handleClick(myRadio) {
    currentValue = myRadio.value;
    document.getElementById("buttonSubmit").disabled = false; 
}

Ein zusätzlicher Vorteil ist, dass ich Daten behandeln und / oder auf die Überprüfung einer Schaltfläche reagieren kann (in diesem Fall die Schaltfläche SUBMIT aktivieren).

Eine Verbesserung gegenüber den zuvor vorgeschlagenen Funktionen:

function getRadioValue(groupName) {
    var _result;
    try {
        var o_radio_group = document.getElementsByName(groupName);
        for (var a = 0; a < o_radio_group.length; a++) {
            if (o_radio_group[a].checked) {
                _result = o_radio_group[a].value;
                break;
            }
        }
    } catch (e) { }
    return _result;
}

Ich gehe dieses Problem mit reinem Javascript an, indem ich den überprüften Knoten finde, seinen Wert finde und ihn aus dem Array heraushole.

var Anodes = document.getElementsByName('A'),
    AValue = Array.from(Anodes)
       .filter(node => node.checked)
       .map(node => node.value)
       .pop();
console.log(AValue);

Beachten Sie, dass ich mit Pfeil Funktionen . In dieser Geige finden Sie ein funktionierendes Beispiel.

Wenn Sie jQuery verwenden:

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

Sie können das .find()markierte Element auswählen:

var radio = Array.from(document.querySelectorAll('#rate input'))

var value = radio.length && radio.find(r => r.checked).value

<form id="rates">
  <input type="radio" name="rate" value="Fixed Rate"> Fixed
  <input type="radio" name="rate" value="Variable Rate"> Variable
  <input type="radio" name="rate" value="Multi Rate" checked> Multi
</form>

dann...

var rate_value = rates.rate.value;

Wert anhand der ID prüfen:

var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;

Ich habe die Funktion jQuery.click verwendet, um die gewünschte Ausgabe zu erhalten:

$('input[name=rate]').click(function(){
  console.log('Hey you clicked this: ' + this.value);

  if(this.value == 'Fixed Rate'){
    rate_value = $('#r1').value;
  } else if(this.value =='Variable Rate'){
   rate_value = $('#r2').value;
  } else if(this.value =='Multi Rate'){
   rate_value = $('#r3').value;
  }  

  $('#results').innerHTML = rate_value;
});

Ich hoffe es hilft.

Wenn sich die Schaltflächen in einem Formular
var myform = new FormData(getformbywhatever); myform.get("rate");
befinden, ist QuerySelector oben eine bessere Lösung. Diese Methode ist jedoch leicht zu verstehen, insbesondere wenn Sie keine Ahnung von CSS haben. Außerdem haben Eingabefelder wahrscheinlich sowieso eine Form.
Nicht überprüft, es gibt andere ähnliche Lösungen, entschuldigen Sie die Wiederholung

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

Ich kann stattdessen keine Werte für ein solches Optionsfeld abrufen

rate_value = document.getElementById('r1').value;

Wenn Sie das verwenden JQuery, verwenden Sie bitte das folgende Snippet für eine Gruppe von Optionsfeldern.

var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();

Verwenden Sie einfach: document.querySelector('input[rate][checked]').value

Sie können die Schaltflächen auch mit einer forEach-Schleife für die Elemente durchlaufen

    var elements = document.getElementsByName('radioButton');
    var checkedButton;
    console.log(elements);
    elements.forEach(e => {
        if (e.checked) {
            //if radio button is checked, set sort style
            checkedButton = e.value;
        }
    });

https://codepen.io/anon/pen/YQxbZJ

Der HTML

<div id="rates">
<input type="radio" id="x1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="x2" name="rate" value="Variable Rate" 
checked="checked"> Variable Rate
<input type="radio" id="x3" name="rate" value="Multi Rate" > Multi Rate
</div>

<button id="rdio"> Check Radio </button>
<div id="check">

</div>

Die JS

var x ,y;
var x = document.getElementById("check");
function boom()
{
if (document.getElementById("x1").checked)
  y = document.getElementById("x1").value;

else if(document.getElementById("x2").checked)
  y = document.getElementById("x2").value;

else if (document.getElementById("x3").checked)
  y = document.getElementById("x3").value;
else
  y = "kuch nhi;"
x.innerHTML = y;
}

var z = document.getElementById('rdio');
z.addEventListener("click", boom);`

In PHP ist es sehr einfach
HTML-Seite

Male<input type="radio" name="radio" value="male"><br/>
Female<input type="radio" name="radio" value="female"><br/>
Others<input type="radio" name="radio" value="other"><br/>
<input type="submit" value="submit">

Nehmen Sie Wert von Form zu PHP

$radio=$_POST['radio'];<br/>
use php if(isset($_POST['submit']))<br/>
{<br/>
echo "you selected".$radio."thank u";<br/>
}