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

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

我一直没有定义。


当前回答

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

其他回答

对于生活在边缘的人们:

现在有一个叫做RadioNodeList的东西,访问它的value属性将返回当前选中输入的值。这将消除首先过滤掉“已检查”输入的必要性,就像我们在许多张贴的答案中看到的那样。

示例的形式

<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: http://jsfiddle.net/vjop5xtq/

请注意,这是在Firefox 33中实现的(所有其他主要浏览器似乎都支持它)。旧的浏览器将需要一个RadioNodeList的polfyill来正常工作

另一种(显然是旧的)选择是使用格式: ”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/

在Javascript中,我们可以通过使用Id的“getElementById()”来获取值,在上面的代码中,您发布的包含名称而不是Id 所以你需要这样修改

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

根据您的代码使用这个rate_value

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

rates元素是一个div,所以它没有值。这可能就是未定义的来源。

checked属性会告诉你元素是否被选中:

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

Or

$("input[type='radio'][name='rate']:checked").val();
var rates = document.getElementById('rates').value;

不能获得单选按钮的值,而是使用

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