使用Javascript获取单选button值

我的JS程序有一些奇怪的问题。 我有这个工作正常，但由于某种原因，它不再工作。 我只想find单选button的值（select哪一个）并将其返回给一个variables。 出于某种原因，它不断返回undefined。 这是我的代码：

function findSelection(field) { var test = 'document.theForm.' + field; var sizes = test; alert(sizes); for (i=0; i < sizes.length; i++) { if (sizes[i].checked==true) { alert(sizes[i].value + ' you got a value'); return sizes[i].value; } } } 

提交表格：

 function submitForm() { var genderS = findSelection("genderS"); alert(genderS); } 

HTML：

 <form action="#n" name="theForm"> <label for="gender">Gender: </label> <input type="radio" name="genderS" value="1" checked> Male <input type="radio" name="genderS" value="0" > Female<br><br> <a href="javascript: submitForm()">Search</A> </form> 

Answer 1

JavaScript的：

 var radios = document.getElementsByName('genderS'); for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { // do whatever you want with the checked radio alert(radios[i].value); // only one radio can be logically checked, don't check the rest break; } } 

http://jsfiddle.net/Xxxd3/610/

编辑：感谢HATCHA和jpsetung的编辑build议。

Answer 2

这适用于任何浏览器。

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

这是获取任何inputtypes值的最纯粹的方法。 你不需要在你的path中包含jQuery。

Answer 3

由于jQuery 1.8，查询的正确语法是

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

not $('input[@name="genderS"]:checked').val(); 了，这是工作在jQuery 1.7（与@ ）。

Answer 4

最简单的解决scheme：

  document.querySelector('input[name=genderS]:checked').value 

Answer 5

尝试这个

 function findSelection(field) { var test = document.getElementsByName(field); var sizes = test.length; alert(sizes); for (i=0; i < sizes; i++) { if (test[i].checked==true) { alert(test[i].value + ' you got a value'); return test[i].value; } } } function submitForm() { var genderS = findSelection("genderS"); alert(genderS); return false; } 

小提琴在这里 。

Answer 6

编辑：正如Chips_100所说，你应该使用：

 var sizes = document.theForm[field]; 

直接不用testingvariables。

---

老答案：

你不应该这样评价吗？

 var sizes = eval(test); 

我不知道这是如何工作，但对我来说，你只是复制一个string。

Answer 7

 document.forms.your-form-name.elements.radio-button-name.value 

Answer 8

ECMAScript 6版本

 let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value; 

Answer 9

这里是一个例子，其中没有检查=“checked”属性被使用的无线电

 function test() { var radios = document.getElementsByName("radiotest"); var found = 1; for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { alert(radios[i].value); found = 0; break; } } if(found == 1) { alert("Please Select Radio"); } } 

演示 ： http ： //jsfiddle.net/ipsjolly/hgdWp/2/ [ 点击查找不select任何收音机 ]

来源： http : //bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

Answer 10

这是纯粹的JavaScript，基于@Fontas的回答，但带有安全代码返回一个空string（并避免TypeError ），如果没有选定的单选button：

 var genderSRadio = document.querySelector("input[name=genderS]:checked"); var genderSValue = genderSRadio ? genderSRadio.value : ""; 

代码如下所示：

• 第1行：获得（a）是<input>types的控件的引用，（b）具有genderS的name属性，并且（c）被选中。
• 第2行：如果有这样的控制，则返回其值。 如果没有，则返回一个空string。 如果第一行find了控件，那么genderSRadiovariables是真实的，如果没有，则为null / falsey。

对于JQuery，使用@ jbabey的答案，并注意如果没有选定的单选button，它将返回undefined 。

Answer 11

  document.querySelector('input[name=genderS]:checked').value 

Answer 12

如果有人正在寻找答案，并像我这样登陆Chrome 34和Firefox 33，可以执行以下操作：

 var form = document.theForm; var radios = form.elements['genderS']; alert(radios.value); 

或更简单：

 alert(document.theForm.genderS.value); 

参考： https ： //developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

Answer 13

使用纯JavaScript，您可以处理对派发事件的对象的引用。

 function (event) { console.log(event.target.value); } 

Answer 14

  <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1"> <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2"> <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3"> <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

等等，然后使用

  $("#rdbExamples:checked").val() 

要么

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

Answer 15

  var value = $('input:radio[name="radiogroupname"]:checked').val();