用Javascript获取单选按钮值

Question

我的JS程序出现了一些奇怪的问题。我有这个工作正常，但由于某种原因，它不再工作。我只想找到单选按钮的值（选择哪一个）并将其返回给变量。由于某种原因，它不断返回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; 
     } 
    } 
} 

SubmitForm：将

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提供修改建议。

Answer 2

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

var sizes = document.theForm[field]; 

的情况下直接使用t est变量。

---

老答案：

你不应该eval这样吗？

var sizes = eval(test); 

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

Answer 3

试试这个

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

小提琴here。

Answer 4

这里是无线电广播的示例，其中没有选中= “选中”属性用于

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

DEMO：http://jsfiddle.net/ipsjolly/hgdWp/2/ [单击查找不选择任何无线电]

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

Answer 5

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

Answer 6

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

Answer 7

因为jQuery的1.8，用于查询的正确的语法是

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

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

Answer 8

这适用于任何浏览器。

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

这是得到任何输入类型值的最纯粹的方法。 你做不是需要在你的路径中包含jQuery。

Answer 9

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

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

Answer 10

最简单的办法：

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

Answer 11

这是纯JavaScript的基础上，通过答案，但@Fontas安全代码返回一个空字符串（和避免TypeError ）如果没有选定的单选按钮：

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

代码分解这样的：

• 1行：获取到控制的引用（a）是<input>类型，（b）具有一个genderS属性name，和（c）进行检查。
• 第2行：如果有这样的控件，则返回它的值。如果没有，则返回空字符串。如果第1行发现控制，则genderSRadio变量为truthy，如果不是，则为null/false。

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

Answer 12

<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 13

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

Answer 14

万一有人在寻找一个答案，并降落在这里像我一样，从Chrome浏览器34和Firefox 33，你可以做到以下几点：

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

或简单：

alert(document.theForm.genderS.value); 

refrence：https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

Answer 15

的ECMAScript 6版

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

Answer 16

如果有可能的你为你的表单元素（）分配一个Id，这种方式可以被认为是一个安全的交替IVE方式（特别是当单选组元素的名称是不是在文件唯一）：

function findSelection(field) { 
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input"); 
    alert(formInputElements); 
     for (i=0; i < formInputElements.length; i++) { 
     if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) { 
      alert(formInputElements[i].value + ' you got a value');  
      return formInputElements[i].value; 
     } 
    } 
} 

HTML：

<form action="#n" name="theForm" id="yourFormId"> 

Answer 17

让假设您需要将单选按钮的不同行的形式，每个独立的属性名称（'option1'，'option2'等），但类名相同。也许你需要他们在多行中，他们将提交一个基于1到5范围的值来关联一个问题。你可以写你的JavaScript像这样：

<script type="text/javascript"> 

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name  
    var radios=""; 

    var i; 
    for(i=0;i<ratings.length;i++){ 
     ratings[i].onclick=function(){ 
      var result = 0; 
      radios = document.querySelectorAll("input[class=ratings]:checked"); 
      for(j=0;j<radios.length;j++){ 
       result = result + + radios[j].value; 
      } 
      console.log(result); 
      document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating 
     } 
    } 
</script> 

我也插入最终输出到一个隐藏表单元素要与形式一并提交。