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

IT技术 javascript html radio-button
2021-02-03 16:41:12

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

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

我不断变得不确定。

6个回答

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

document.querySelector('input[name="rate"]:checked').value;
@KamranAhmed：您的 jQuery 解决方案的成本要高得多。
2021-03-12 16:41:12
当然，您必须检查 querySelector 是否返回 null。如果没有选中单选按钮，就会出现这种情况。
2021-03-23 16:41:12
ParthikGosar：IE8 不支持:checked选择器。
2021-03-26 16:41:12
@KamranAhmed 直到并且除非您可以对上述内容进行概要分析和/或检查调用背后的实现，否则您对上述内容的性能只能说得比对任何其他调用本机代码的单行器多说。我们没有足够的信息来推测浏览器如何设法定位:checked元素——也许它具有“散列和缓存”的所有内容并且它是一个O(1)操作。除非您对其进行了分析以表明查询时间随着页面上元素数量的增加而增长，或者除非您了解其背后的浏览器源代码，否则您无法判断。
2021-04-05 16:41:12
请注意，周围的引号rate不是必需的。
2021-04-08 16:41:12 
var rates = document.getElementById('rates').value;

rate 元素是 a div，因此它没有值。这可能就是它的undefined来源。

该checked属性将告诉您该元素是否被选中：

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

或者

$("input[type='radio'][name='rate']:checked").val();
在 Javascript 中，您不需要获得所有这些：document.querySelector("input[name=rate]:checked").value.
2021-03-11 16:41:12
在 Javascript 中它会是 document.querySelectorAll("input[name=rate]:checked")[0].value
2021-03-20 16:41:12
@mzalazar 不，每个单选按钮都有自己的 ID，但都具有相同的名称，这就是将它们放入一组的原因，因此如果您选择一个，另一个将被取消选择。使用 Kamran Ahmed 答案，您可以检查组中的哪个单选按钮被选中，并仅获取所选（选中）一个的值。
2021-03-24 16:41:12
在 jquery 中它会是 $("input[name=rate]:checked").val()
2021-03-28 16:41:12
mahdavipanah 上面的代码（带有[checked]）查找属性（即初始状态）。您应该改为使用:checked，它会查找属性（即当前状态），并且几乎总是您想要的。
2021-04-08 16:41:12

您可以通过使用该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;
    }
}
这是这个问题最干净的香草实现。荣誉！
2021-03-17 16:41:12
鉴于只能检查一个无线电，我通常希望块内的breakorreturn语句if停止通过循环的额外传递。一个小点，但很好的风格。
2021-03-23 16:41:12

对于生活在边缘的人们：

现在有一个叫做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 中实现的（所有其他主要浏览器似乎都支持它）。较旧的浏览器将需要 polfyillRadioNodeList才能正常运行

form.elements["test"].value 在 Chrome [版本 49.0.2623.87 m] 中运行良好。
2021-04-01 16:41:12
它必须是一种形式，不能使用例如 div。否则这在 FF 71.0 中有效。
2021-04-07 16:41:12

下面从 api.jquery.com 给出了对我有用的那个。

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

JavaScript

var selectedOption = $("input:radio[name=option]:checked").val()

变量 selectedOption 将包含所选单选按钮的值（即）o1 或 o2

其它你可能感兴趣的问题
上一篇如何从 base64 数据 URI 保存 PNG 图像服务器端 下一篇使用 JavaScript 将光标置于文本输入元素中的文本末尾