Zom*_*man 284 html javascript radio-button
我到处寻找并试图从一组单选按钮中获取所选值.
这是我的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;
我一直都没有定义.
Par*_*sar 459
这适用于IE9及更高版本以及所有其他浏览器.
document.querySelector('input[name="rate"]:checked').value;
Joe*_*e F 223
var rates = document.getElementById('rates').value;
rates元素是a div,因此它没有值.这可能就是它的undefined来源.
该checked属性将告诉您元素是否被选中:
if (document.getElementById('r1').checked) {
rate_value = document.getElementById('r1').value;
}
Joe*_*Joe 131
您可以使用该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;
}
}
Dan*_*iel 34
对于生活在边缘的人们:
现在有一个名为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中实现的(所有其他主要浏览器似乎都支持它).较旧的浏览器需要一个polfyill才能RadioNodeList使其正常运行
Bew*_*lam 34
如果您使用的是没有 jQuery 的 JavaScript，则可以使用以下命令：
document.querySelector("input[type='radio'][name=rate]:checked").value;
Mal*_*thy 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
JHS*_*JHS 11
另一个(显然较旧的)选项是使用以下格式:"document.nameOfTheForm.nameOfTheInput.value;" 例如document.mainForm.rads.value;
document.mainForm.onclick = function(){
var radVal = document.mainForm.rads.value;
result.innerHTML = 'You selected: '+radVal;
}<form id="mainForm" name="mainForm">
<input type="radio" name="rads" value="1" />
<input type="radio" name="rads" value="2" />
<input type="radio" name="rads" value="3" />
<input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>您可以在表单中按名称引用元素.您的原始HTML不包含表单元素.
小提琴(适用于Chrome和Firefox):https: //jsfiddle.net/Josh_Shields/23kg3tf4/1/
paw*_*dak 10
使用document.querySelector（'input [type = radio]：checked'）。value; 要获取所选复选框的值，您可以使用其他属性来获取值，例如名称=性别 等。请仔细阅读 以下代码段，它肯定会对您有所帮助，
解
document.mainForm.onclick = function(){
var gender = document.querySelector('input[name = gender]:checked').value;
result.innerHTML = 'You Gender: '+gender;
}<form id="mainForm" name="mainForm">
<input type="radio" name="gender" value="Male" checked/>Male
<input type="radio" name="gender" value="Female" />Female
<input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>谢谢
小智 5
在Javascript中，我们可以通过getElementById()在上面发布的代码中使用Id的“ ” 获取值，其中包含的名称不是Id，因此您可以像这样修改
if (document.getElementById('r1').checked) {
rate_value = document.getElementById('r1').value;
}
根据您的代码使用此rate_value
自问问题以来已经过去了一年左右，但我认为答案的实质性改进是可能的。我发现这是最简单，最通用的脚本，因为它检查按钮是否已被检查，如果已检查，其值是什么：
<!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
}
}
假设您的表单元素由myForm下面的变量引用，并且您的单选按钮共享名称“ my-radio-button-group-name”，则以下内容是纯JavaScript并符合标准的（尽管我没有检查过它在任何地方都可用） ）：
myForm.elements.namedItem("my-radio-button-group-name").value
上面的代码将产生选中（或选中，也称为）单选按钮元素（如果有）的值，null否则将产生其他值。解决方案的关键是namedItem专门用于单选按钮的功能。
请参阅HTMLFormElement.elements，HTMLFormControlsCollection.namedItem，尤其是RadioNodeList.value，namedItem 通常会返回一个RadioNodeList对象。
我之所以使用MDN，是因为它允许人们至少在很大程度上跟踪标准的符合性，并且因为它比许多WhatWG和W3C出版物都容易理解。
小智 5
HTML代码：
<input type="radio" name="rdoName" value="YES"/>
<input type="radio" name="rdoName" value="NO"/>
JQUERY代码：
var value= $("input:radio[name=rdoName]:checked").val();
var value= $("input:radio[name=rdoName]:checked").val();
$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})你会得到
value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"
[...rates.children].find(c=>c.checked).value
[...rates.children].find(c=>c.checked).value
let v= [...rates.children].find(c=>c.checked).value
console.log(v);