我的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>

您可以执行以下操作：

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

<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

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

这适用于任何资源管理器。

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

这是获取任何输入类型的值的简单方法。您也不需要包含jQuery路径。

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

从jQuery 1.8开始，查询的正确语法是

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

现在已经$('input[@name="genderS"]:checked').val();不行了，它已经在jQuery 1.7中工作了（使用@）。

ECMAScript 6版本

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

最简单的解决方案：

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

试试这个

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

小提琴在这里。

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

var sizes = document.theForm[field];

直接使用测试变量。

旧答案：

你不eval喜欢这个吗？

var sizes = eval(test);

我不知道它是如何工作的，但是对我来说，您只是在复制一个字符串。

这是纯JavaScript，基于@Fontas的回答，但带有安全代码，TypeError如果没有选中的单选按钮，则返回一个空字符串（并避免使用）：

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

代码分解如下：

• 第1行：获取对以下控件的引用：（a）是<input>类型，（b）具有name属性genderS，并且（c）被检查。
• 第2行：如果存在此类控件，则返回其值。如果没有，则返回一个空字符串。的genderSRadio变量是truthy如果第1行的发现控制和空/ falsey如果它没有。

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

如果有人在寻找答案并像我一样登陆此处，可以从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

这是不使用Checked =“ 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/ [ 单击查找而不选择任何收音机 ]

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

这是一种使用普通JavaScript获取选中的单选按钮的值的好方法：

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

资料来源：https : //ultimatecourses.com/blog/get-value-checked-radio-buttons

使用此HTML：

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

你也可以使用数组查找的checked属性来找到检查项目：

Array.from(form.elements.characters).find(radio => radio.checked);

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

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

让我们假设您需要在表单中放置单选按钮的不同行，每个单选按钮具有单独的属性名称（'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>

我还将最终输出插入到一个隐藏的表单元素中，与表单一起提交。

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

如果可以为表单element（）分配ID，则可以将这种方法视为安全的替代方法（特别是当单选组元素名称在文档中不唯一时）：

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

 <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();

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