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.
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;
}
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 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;
}
}
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
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
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/
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
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
}
}
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 namedItem
in 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.
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
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"
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).
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;
}
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
Verwenden Sie einfach: document.querySelector('input[rate][checked]').value
Wenn Sie jQuery verwenden:
$('input[name="rate"]:checked').val();
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.
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>
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();
<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;
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.
Wenn sich die Schaltflächen in einem Formular befindenvar 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
var rates = document.getElementById('rates').value;
kann keine Werte eines Optionsfelds erhalten, stattdessen verwenden
rate_value = document.getElementById('r1').value;
wert nach ID prüfen:
var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;
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/>
}