如何获得选定的单选button的价值？
我到处寻找，并试图从一组单选button中获取所选值。
这是我的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> 这是我的.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;
我一直未定义。
var rates = document.getElementById('rates').value;
rates元素是一个div ，所以它不会有值。 这可能是undefined的来源。
checked属性会告诉你是否选中元素：
if (document.getElementById('r1').checked) { rate_value = document.getElementById('r1').value; }
这适用于IE9及以上版本和所有其他浏览器。
document.querySelector('input[name="rate"]:checked').value;
您可以通过使用checked属性来获取值。
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属性将返回当前选中input的值。 这将消除首先筛选“检查”input的必要性，正如我们在许多发布的答案中看到的那样。
示例表单
<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>
要检索检查的值，你可以做这样的事情：
var form = document.getElementById("test"); alert(form.elements["test"].value);
JSFiddle来certificate它： http : //jsfiddle.net/vjop5xtq/
请注意这是在Firefox 33中实现的（所有其他主stream浏览器似乎都支持它）。 旧版本的浏览器需要使用RadioNodeList的RadioNodeList ，才能正常工作
下面是从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()
variablesselectedOption将包含所选单选button（即）o1或o2的值
另一个（显然更老）选项是使用格式：“document.nameOfTheForm.nameOfTheInput.value;” 例如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>
在JavaScript中，我们可以通过使用Id的“ getElementById() ”在上面的代码中发布的值包含名称而不是Id，因此您可以像这样修改
if (document.getElementById('r1').checked) { rate_value = document.getElementById('r1').value; }
根据你的代码使用这个rate_value
自问题提出以来，一年多左右的时间已经过去了，但我认为答案的实质性改进是可能的。 我觉得这是最简单和最通用的脚本，因为它检查button是否已被检查，如果是，它的价值是什么：
<!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>
您也可以在另一个函数中调用该函数，如下所示：
function doSomething() { getRadioValue('theRadioGroupName'); if (rdValue == '10') { // do something } else if (rdValue == 'noRadioChecked') { // do something else } }
直接调用一个单选button多次给你的FIRSTbutton，而不是CHECKEDbutton的值。 而不是循环单选button来查看哪一个被选中，我更喜欢调用一个onclick javascript函数来设置一个variables，以后可以随意检索。
<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >
其中呼吁：
var currentValue = 0; function handleClick(myRadio) { currentValue = myRadio.value; document.getElementById("buttonSubmit").disabled = false; }
额外的好处是，我可以对待数据和/或对检查button作出反应（在这种情况下，启用SUBMITbutton）。
假设你的表单元素被下面的myFormvariables引用，并且你的单选button共享名称“my-radio-button-group-name”，下面是纯JavaScript和符合标准的（虽然我没有检查它是可用的到处）：
myForm.elements.namedItem("my-radio-button-group-name").value
如果有的话，以上将产生一个检查 （或select，因为它也被称为）单选button元素的null否则为null 。 解决scheme的核心是具有单选button的namedItem函数。
参见HTMLFormElement.elements ， HTMLFormControlsCollection.namedItem ，特别是RadioNodeList.value ，因为namedItem 通常返回一个RadioNodeList对象。
我使用MDN是因为它允许跟踪标准遵从性，至less在很大程度上是因为它比许多WhatWG和W3C出版物更容易理解。
对以前build议的function的改进：
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; }
如果你正在使用jQuery：
$('input[name="rate"]:checked').val();
您可以使用.find()来select选中的元素：
var radio = Array.from(document.querySelectorAll('#rate input')) var value = 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>
然后…
var rate_value = rates.rate.value;
通过ID检查值：
var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;
我使用jQuery.click函数来获得所需的输出：
$('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; });
希望能帮助到你。
如果button是在一个窗体中
var myform = new FormData(getformbywhatever); myform.get("rate");
上面的QuerySelector是一个更好的解决scheme。 但是，这种方法很容易理解，特别是如果你对CSS没有任何线索的话。 另外，无论如何，input字段很可能是一种forms。
没有检查，还有其他类似的解决scheme，抱歉的重复
var rates = document.getElementById('rates').value;
不能获得单选button的值，而是使用
rate_value = document.getElementById('r1').value;
https://codepen.io/anon/pen/YQxbZJ
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>
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);`
HTML
<input type="radio" name="radio" onclick="updateRadio(1);"/> <input type="radio" name="radio" onclick="updateRadio(2);"/> <input type="radio" name="radio" onclick="updateRadio(3);"/> <input type="button" onclick="updateDataBase();"/>
JavaScript的
var radio_val=0; function updateRadio(val){ radio_val=val; } function updateDataBase(){ if(radio_val<=0) alert('please select the radio'); else{ //do operations } }
如果您正在使用JQuery ，请使用下面的单选button组。
var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();
只需使用： document.querySelector('input[rate][checked]').value
