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

这是我的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;

我一直没有定义。


当前回答

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

其他回答

另一种(显然是旧的)选择是使用格式: ”document.nameOfTheForm.nameOfTheInput.value;“ 例如document.mainForm.rads.value;

document.mainForm.onclick = function(){ var radVal = document.mainForm.rads.value; result.innerHTML = '你选择了: '+radVal; } <form id=“mainForm” name=“mainForm”> <输入类型=“无线电” 名称=“rads” 值=“1” /> <输入类型=“收音机” 名称=“rads” 值=“2” /> <输入类型=“无线电” 名称=“rads” 值=“3” /> <输入类型=“收音机” 名称=“rads” 值=“4” /> </form> <span id=“result”></span>

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

这里(适用于Chrome和Firefox): https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

下面是一种解决方案,将单选按钮放在一个常量中,只在需要时获取所选值。

Const rates = document.forms.rates.elements["rate"] showRate () 函数showRate () { . getelementbyid(的结果)。innerHTML = rates.value } <form id="rates" onchange="showRate()" > <input type="radio" id="r1" name="rate" value="Fixed rate" >固定利率 <input type="radio" id="r2" name="rate" value="可变利率">可变利率 <input type="radio" id="r3" name="rate" value="Multi rate" checked="checked"> Multi rate . > < /形式 < div id = "结果" > < / div >

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

这适用于IE9及以上版本和所有其他浏览器。

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

如果你正在使用jQuery:

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