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

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

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

我一直没有定义。

当前回答

假设你的表单元素是由下面的myForm变量引用的，并且你的单选按钮共享名称“my-radio-button-group-name”，以下是纯JavaScript和标准兼容的(尽管我没有检查它是否在任何地方都可用):

myForm.elements.namedItem("my-radio-button-group-name").value

上述操作将产生选中(或也称为选中)单选按钮元素(如果有)的值，否则为空。解决方案的关键是namedItem函数，它专门用于单选按钮。

看到HTMLFormElement。元素，HTMLFormControlsCollection.namedItem，特别是RadioNodeList。作为namedItem通常返回一个RadioNodeList对象。

(我使用MDN是因为它允许人们跟踪标准遵从性，至少在很大程度上是这样，而且因为它比许多WhatWG和W3C出版物更容易理解)

2016-06-03 13:28:40

其他回答

var rates=document.getElementsByName("rate"); for (i = 0; i < rates.length; i++) { if (rates[i].checked) { console.log(rates[i].value); rate=rates[i].value; document.getElementById("rate").innerHTML = rate; alert(rate); } } <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> </br> <div id='rate'> </div>

2019-01-23 09:58:37

对前面建议功能的改进:

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

2014-07-25 18:02:56

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

2017-08-31 07:43:12

最短的

[...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

这个问题已经提出一年左右了，但我认为答案可能会有实质性的改进。我发现这是最简单和最通用的脚本，因为它检查按钮是否被选中，如果是的话，它的值是什么:

<!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
    }  
}

2014-05-20 17:47:01

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

推荐文章

最新文章

标签