wake-up-neo.com

Wie erhalte ich den Wert des ausgewählten Optionsfelds?

Ich habe überall gesucht und alles versucht, um den ausgewählten Wert von einer Gruppe von Optionsfeldern zu erhalten. 

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.

javascripthtmlradio-button
255
ZombieBatman
var rates = document.getElementById('rates').value;

Das Rates-Element ist div und hat daher keinen Wert. Wahrscheinlich kommt das undefined hierher.

Die checked-Eigenschaft sagt Ihnen, ob das Element ausgewählt ist:

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

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

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

Sie können den Wert mithilfe der checked-Eigenschaft 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;
    }
}
114
Joe

Für Sie, die am Rande leben:

Es gibt jetzt etwas namens RadioNodeList und der Zugriff auf seine value -Eigenschaft gibt den Wert der aktuell geprüften Eingabe zurück. Dies beseitigt die Notwendigkeit, zuerst die "geprüften" Eingaben herauszufiltern, wie wir in vielen der 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 gängigen Browser scheinen dies zu unterstützen). Ältere Browser benötigen ein polfyill für RadioNodeList, damit dies ordnungsgemäß funktioniert

25
Daniel

Die für mich erarbeitete Version ist unten angegeben von api.jquery.com.

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 (d. H.) O1 oder o2

9
Malathy

Eine andere (anscheinend ältere) Option besteht im Format: "Document.nameOfTheForm.nameOfTheInput.value;" Z. 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 in einem Formular anhand seines Namens 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/

9
JHS

Verwenden Sie document.querySelector ('input [type = radio]: checked'). Value; , um den Wert des ausgewählten Kontrollkästchens abzurufen. Sie können dazu andere Attribute verwenden Holen Sie sich einen Wert wie Name = Geschlecht usw. Bitte gehen Sie unten durch. Auf jeden Fall wird es Ihnen 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>

Dankeschön

8
pawan vedak

Es ist schon ein Jahr vergangen, seit die Frage gestellt wurde, aber ich dachte, dass eine wesentliche Verbesserung der Antworten möglich sei. Ich finde das das einfachste und vielseitigste Skript, weil es überprüft, ob eine Schaltfläche markiert wurde und wenn ja, wie hoch ihr Wert ist: 

<!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 innerhalb einer anderen Funktion aufrufen: 

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

Wenn Sie davon ausgehen, dass Ihr Formularelement mit der Variable myForm unten bezeichnet wird und Ihre Optionsschaltflächen den Namen "my-radio-button-group-name" haben, gilt Folgendes als reines JavaScript und die Einhaltung von Standards (obwohl ich es nicht geprüft habe, um verfügbar zu sein überall):

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

Das obige ergibt den Wert eines checked (oder ausgewähltes, wie es auch genannt wird) Optionsfeldelement (falls vorhanden) oder andernfalls null. Der Kern der Lösung ist die namedItem-Funktion, die speziell mit Optionsfeldern arbeitet.

Siehe HTMLFormElement.elements , HTMLFormControlsCollection.namedItem und insbesondere RadioNodeList.value , da namedItemin der Regel ein RadioNodeList-Objekt zurückgibt.

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

4
amn

In Javascript können wir die Werte abrufen, indem Sie die ID "getElementById()" in dem von Ihnen geposteten Code verwenden und nicht den Namen Id .__

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

verwenden Sie diesen rate_value entsprechend Ihrem Code

4
pradeep

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"
3
user8590818

wenn Sie eine Optionsschaltfläche mehrmals direkt aufrufen, erhalten Sie den Wert der FIRST-Schaltfläche, nicht der CHECKED-Schaltfläche. Anstatt die Optionsfelder zu durchlaufen, um zu sehen, welche Option aktiviert ist, ziehe ich es vor, eine JavaScript-Funktion onclick zu verwenden, die eine Variable festlegt, die später 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 weiterer 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).

3
tony gil

Eine Verbesserung der 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;
}
2
Dave

Sie können .find() verwenden, um das markierte Element auszuwählen:

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

var value = radio.length && radio.find(r => r.checked).value
1
Yukulélé

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

1
mahdavipanah

Wenn Sie jQuery verwenden:

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

1
Senthil Kumar Thangavel

Ich nehme dieses Problem mit reinem Javascript auf, um den geprüften Knoten zu finden, seinen Wert zu ermitteln und ihn aus dem Array herauszuholen.

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 arrow-Funktionen ..__ benutze. Siehe/ Geige für ein funktionierendes Beispiel.

1
pongi

   var rates=document.getElementsByName("rate");
            for (i = 0; i < rates.length; i++) {
            if (rates[i].checked) {
              console.log(rates[i].value);
              rate=rates[i].value;
              document.getElementById("rate").innerHTML = rate;
              alert(rate);
              
            }
          }
        <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>
        </br>
        <div id='rate'>
        </div>

0
Bishnu Kumar Roy

Wenn Sie die JQuery verwenden, verwenden Sie bitte den unten abgebildeten Ausschnitt für eine Gruppe von Optionsfeldern.

var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();
0
Surendra K
<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;
0
user7420100

Ich habe die jQuery.click-Funktion 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.

0
Animesh Singh

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

0
Kun Wang
var rates = document.getElementById('rates').value;

kann keine Werte eines Optionsfelds erhalten, stattdessen verwenden

rate_value = document.getElementById('r1').value;
0
James Cluade

wert nach ID prüfen:

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

In PHP ist das 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 den Wert von der Form bis zum PHP

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