如何获取所选单选按钮的值?

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

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

我一直没有定义。

当前回答

对于生活在边缘的人们:

现在有一个叫做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来正常工作

2014-10-07 12:46:21

其他回答

最短的

[...rates.children].find(c=>c.checked).value

Let v=[…rates.children].find(c=>c.checked).value console.log (v); < div id = "利率" > <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 >

2020-07-20 22:20:07

我对这个问题的纯javascript是找到检查节点，找到它的值，并弹出它从数组。

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

注意，我使用的是箭头函数。看看这把小提琴的工作例子。

2017-11-21 10:45:52

还可以在元素上使用forEach-loop循环遍历按钮

    var elements = document.getElementsByName('radioButton');
    var checkedButton;
    console.log(elements);
    elements.forEach(e => {
        if (e.checked) {
            //if radio button is checked, set sort style
            checkedButton = e.value;
        }
    });

2019-12-07 00:05:17

对于生活在边缘的人们:

示例的形式

<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来正常工作

2014-10-07 12:46:21

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

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

2013-04-05 16:59:04

如何获取所选单选按钮的值?

推荐文章

最新文章

标签