如何获得选定的单选button的价值?

我到处寻找,并试图从一组单选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; 

我一直未定义。

 var rates = document.getElementById('rates').value; 

rates元素是一个div ,所以它不会有值。 这可能是undefined的来源。

checked属性会告诉你是否选中元素:

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

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

 document.querySelector('input[name="rate"]:checked').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; } } 

对于生活在边缘的人们:

现在有一个名为RadioNodeList的东西,访问它的value属性将返回当前选中input的值。 这将消除首先筛选“检查”input的必要性,正如我们在许多发布的答案中看到的那样。

示例表单

 <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来certificate它: http : //jsfiddle.net/vjop5xtq/

请注意这是在Firefox 33中实现的(所有其他主stream浏览器似乎都支持它)。 旧版本的浏览器需要使用RadioNodeList的RadioNodeList ,才能正常工作

下面是从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() 

variablesselectedOption将包含所选单选button(即)o1或o2的值

另一个(显然更老)选项是使用格式:“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> 

在JavaScript中,我们可以通过使用Id的“ getElementById() ”在上面的代码中发布的值包含名称而不是Id,因此您可以像这样修改

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

根据你的代码使用这个rate_value

自问题提出以来,一年多左右的时间已经过去了,但我认为答案的实质性改进是可能的。 我觉得这是最简单和最通用的脚本,因为它检查button是否已被检查,如果是,它的价值是什么:

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

直接调用一个单选button多次给你的FIRSTbutton,而不是CHECKEDbutton的值。 而不是循环单选button来查看哪一个被选中,我更喜欢调用一个onclick javascript函数来设置一个variables,以后可以随意检索。

 <input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" > 

其中呼吁:

 var currentValue = 0; function handleClick(myRadio) { currentValue = myRadio.value; document.getElementById("buttonSubmit").disabled = false; } 

额外的好处是,我可以对待数据和/或对检查button作出反应(在这种情况下,启用SUBMITbutton)。

假设你的表单元素被下面的myFormvariables引用,并且你的单选button共享名称“my-radio-button-group-name”,下面是纯JavaScript和符合标准的(虽然我没有检查它是可用的到处):

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

如果有的话,以上将产生一个检查 (或select,因为它也被称为)单选button元素的null否则为null 。 解决scheme的核心是具有单选button的namedItem函数。

参见HTMLFormElement.elements , HTMLFormControlsCollection.namedItem ,特别是RadioNodeList.value ,因为namedItem 通常返回一个RadioNodeList对象。

我使用MDN是因为它允许跟踪标准遵从性,至less在很大程度上是因为它比许多WhatWG和W3C出版物更容易理解。

对以前build议的function的改进:

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

如果你正在使用jQuery:

$('input[name="rate"]:checked').val();

您可以使用.find()来select选中的元素:

 var radio = Array.from(document.querySelectorAll('#rate input')) var value = radio.find(r => r.checked).value 
 <form id="rates"> <input type="radio" name="rate" value="Fixed Rate"> Fixed <input type="radio" name="rate" value="Variable Rate"> Variable <input type="radio" name="rate" value="Multi Rate" checked> Multi </form> 

然后…

 var rate_value = rates.rate.value; 

通过ID检查值:

 var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0; 

我使用jQuery.click函数来获得所需的输出:

 $('input[name=rate]').click(function(){ console.log('Hey you clicked this: ' + this.value); if(this.value == 'Fixed Rate'){ rate_value = $('#r1').value; } else if(this.value =='Variable Rate'){ rate_value = $('#r2').value; } else if(this.value =='Multi Rate'){ rate_value = $('#r3').value; } $('#results').innerHTML = rate_value; }); 

希望能帮助到你。

如果button是在一个窗体中
var myform = new FormData(getformbywhatever); myform.get("rate");
上面的QuerySelector是一个更好的解决scheme。 但是,这种方法很容易理解,特别是如果你对CSS没有任何线索的话。 另外,无论如何,input字段很可能是一种forms。
没有检查,还有其他类似的解决scheme,抱歉的重复

 var rates = document.getElementById('rates').value; 

不能获得单选button的值,而是使用

 rate_value = document.getElementById('r1').value; 

https://codepen.io/anon/pen/YQxbZJ

HTML

 <div id="rates"> <input type="radio" id="x1" name="rate" value="Fixed Rate"> Fixed Rate <input type="radio" id="x2" name="rate" value="Variable Rate" checked="checked"> Variable Rate <input type="radio" id="x3" name="rate" value="Multi Rate" > Multi Rate </div> <button id="rdio"> Check Radio </button> <div id="check"> </div> 

JS

 var x ,y; var x = document.getElementById("check"); function boom() { if (document.getElementById("x1").checked) y = document.getElementById("x1").value; else if(document.getElementById("x2").checked) y = document.getElementById("x2").value; else if (document.getElementById("x3").checked) y = document.getElementById("x3").value; else y = "kuch nhi;" x.innerHTML = y; } var z = document.getElementById('rdio'); z.addEventListener("click", boom);` 

HTML

 <input type="radio" name="radio" onclick="updateRadio(1);"/> <input type="radio" name="radio" onclick="updateRadio(2);"/> <input type="radio" name="radio" onclick="updateRadio(3);"/> <input type="button" onclick="updateDataBase();"/> 

JavaScript的

 var radio_val=0; function updateRadio(val){ radio_val=val; } function updateDataBase(){ if(radio_val<=0) alert('please select the radio'); else{ //do operations } } 

如果您正在使用JQuery ,请使用下面的单选button组。

 var radioBtValue= $('input[type=radio][name=radiobt]:checked').val(); 

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