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

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

我一直没有定义。


当前回答

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

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 >

其他回答

还可以在元素上使用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;
        }
    });

您可以使用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;
    }
}
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();

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

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

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