关于javascript：如何获取所选单选按钮的价值？

How to get value of selected radio button?

我想从一组单选按钮中获取选定的值。

这是我的HTML：

1
2
3

<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

这是我的.js：

1
2
3
4
5
6
7
8
9
10
11
12
13

我一直不

相关讨论

在IE9及更高版本以及所有其他浏览器中都可以使用。

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

相关讨论

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

rates元素是div，因此它没有值。这可能是undefined的来源。

checked属性将告诉您是否选择了元素：

1
2
3

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

相关讨论

您可以使用checked属性获取值。

1
2
3
4
5
6
7

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

相关讨论

对于生活在边缘的人们：

现在有一个称为RadioNodeList的东西，访问它的value属性将返回当前检查的输入的值。正如我们在许多已发布答案中看到的那样，这将消除了先过滤掉"已检查"输入的必要性。

范例表格

1
2
3
4
5

要检索检查的值，您可以执行以下操作：

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

JSFiddle对此进行了证明：http://jsfiddle.net/vjop5xtq/

请注意，这是在Firefox 33中实现的(所有其他主流浏览器似乎都支持它)。较旧的浏览器需要RadioNodeList的polfyill才能正常运行

相关讨论

另一个(显然是较旧的)选项是使用以下格式：
" document.nameOfTheForm.nameOfTheInput.value;"
例如document.mainForm.rads.value;

1
2
3
4

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

1
2
3
4
5
6
7

您可以在表单中通过元素的名称来引用它。您的原始HTML但是不包含form元素。

在这里拨弄琴弦(可在Chrome和Firefox中使用)：
https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

相关讨论

api.jquery.com在下面提供了对我有用的一个。

的HTML

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

的JavaScript

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

变量selectedOption将包含选定单选按钮(即o1或o2)的值

使用document.querySelector('input [type = radio]：checked')。value;要获取所选复选框的值，您可以使用其他属性来获取值，例如名称=性别等。请仔细阅读以下代码段，它肯定会对您有所帮助，

解

1
2
3
4

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

1
2
3
4
5
6

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

谢谢

假设您的表单元素由下面的myForm变量引用，并且您的单选按钮共享名称" my-radio-button-group-name"，则以下内容是纯JavaScript兼容的(尽管我没有对其进行检查)随处可见)：

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

上面将产生一个选中(或选中，也称为)单选按钮元素的值(如果有)，否则为null。解决方案的关键是namedItem函数，该函数专门用于单选按钮。

请参阅HTMLFormElement.elements，HTMLFormControlsCollection.namedItem，尤其是RadioNodeList.value，因为namedItem通常返回RadioNodeList对象。

我之所以使用MDN，是因为它允许人们至少在很大程度上跟踪标准的符合性，并且因为它比许多WhatWG和W3C出版物都容易理解。

相关讨论

HTML代码：

JQUERY代码：

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

1
2
3
4
5

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

1
2
3
4
5

你会得到

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

在Javascript中，我们可以通过在您发布的上述代码中使用ID的" getElementById()"来获取值，其中包含不包含ID的名称
所以你这样修改

1
2
3

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

根据您的代码使用此rate_value

自问问题以来已经过去了一年左右，但我认为答案的实质性改进是可能的。我发现这是最简单，最通用的脚本，因为它检查按钮是否已被检查，如果已检查，其值是什么：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Check radio checked and its value
</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>

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

</body>
</html>

您还可以在另一个函数中调用该函数，如下所示：

1
2
3
4
5
6
7
8
9

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

多次直接调用单选按钮会为您提供FIRST按钮(而不是CHECKED按钮)的值。我宁愿调用一个onclick javascript函数来设置一个变量，以后可以随意检索该变量，而不是通过单选按钮循环查看哪个按钮。

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

哪个调用：

1
2
3
4
5

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

另一个优点是我可以处理数据和/或对按钮的检查做出反应(在这种情况下，启用SUBMIT按钮)。

相关讨论

我对使用纯JavaScript的此问题的看法是找到选中的节点，找到其值，然后将其从数组中弹出。

1
2
3
4
5
6

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

请注意，我正在使用箭头功能。
有关工作示例，请参见此小提琴。

相关讨论

对以前建议的功能的改进：

1
2
3
4
5
6
7
8
9
10
11
12
13

如果您使用的是jQuery：

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

您可以使用.find()选择选中的元素：

1
2
3

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

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

相关讨论

1
2
3
4
5
6
7
8
9
10

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

}
}

1
2
3
4
5

通过ID检查值：

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

我使用了jQuery.click函数来获取所需的输出：

1
2
3
4
5
6
7
8
9
10
11
12
13

$('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;
});

希望能帮助到你。

如果按钮为表格
var myform = new FormData(getformbywhatever);
myform.get("rate");
上面的QuerySelector是更好的解决方案。但是，这种方法很容易理解，特别是在您不了解CSS的情况下。另外，输入字段很可能还是采用某种形式。
没有检查，还有其他类似的解决方案，对不起，重复

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

无法获得像这样的单选按钮的值，而是使用

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

相关讨论

如果您使用的是JQuery，请使用下面的单选按钮片段。

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

只需使用：document.querySelector('input[rate][checked]').value

相关讨论

1
2
3
4
5

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

然后...

1	var rate_value = rates.rate.value;

相关讨论

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

HTML

1
2
3
4
5
6
7

<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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

在php中非常容易
HTML页面

1
2
3
4

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

从表格中获取价值到php

1
2
3
4
5

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