如何获取选中的单选按钮的值？

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

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

var sizes = document.theForm[field];

直接不使用测试变量。

---

旧答案：

你不应该eval这样吗？

var sizes = eval(test);

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

Answer 2

你可以这样做：

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 的编辑建议。

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

这是一个没有使用 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");
   }    
}

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

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

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

代码分解如下：

• 第 1 行：获取对控件的引用，该控件 (a) 是 <input> 类型，(b) 具有 name 属性的 genderS，并且 (c) 已检查。
• 第 2 行：如果有这样的控件，则返回其值。如果没有，则返回一个空字符串。如果第 1 行找到控件，则 genderSRadio 变量为真，否则为空/假。

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

Answer 11

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

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

Answer 13

如果有人在寻找答案并像我一样来到这里，您可以从 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 14

ECMAScript 6 版本

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

Answer 15

如果您可以为表单 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">

Answer 16

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

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

Answer 17

这是使用纯 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>

您还可以使用Array Find checked 属性来查找选中的项目：

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

Answer 18

我喜欢使用方括号从输入中获取值，它比使用点更清晰。

document.forms['form_name']['input_name'].value;

Answer 19

首先，向 ashraf aaref 致敬，我想扩展一下他的回答。

正如 MDN Web Docs 建议的那样，使用 RadioNodeList 是首选方法：

// Get the form
const form = document.forms[0];

// Get the form's radio buttons
const radios = form.elements['color'];

// You can also easily get the selected value
console.log(radios.value);

// Set the "red" option as the value, i.e. select it
radios.value = 'red';

但也可以通过querySelector 选择表单，它也可以正常工作：

const form = document.querySelector('form[name="somename"]')

但是，直接选择无线电将不工作，因为它返回一个简单的NodeList。

document.querySelectorAll('input[name="color"]')
// Returns: NodeList [ input, input ]

首先选择表单时返回RadioNodeList

document.forms[0].elements['color']
// document.forms[0].color # Shortcut variant
// document.forms[0].elements['complex[naming]'] # Note: shortcuts do not work well with complex field names, thus `elements` for a more programmatic aproach
// Returns: RadioNodeList { 0: input, 1: input, value: "red", length: 2 }

这就是为什么你必须先选择表单，然后调用elements 方法。除了所有 input 节点之外，RadioNodeList 还包括一个属性 value，它可以实现这种简单的操作。

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

Answer 20

我更喜欢使用formdata object，因为它表示提交表单时应该发送的值。

Demo:

let formData = new FormData(document.querySelector("form"));
console.log(`The value is: ${formData.get("choice")}`);

<form>
    <p>Pizza crust:</p>
    <p>
        <input type="radio" name="choice" value="regular" >
        <label for="choice1id">Regular crust</label>
    </p>
    <p>
        <input type="radio" name="choice" value="deep" checked >
        <label for="choice2id">Deep dish</label>
    </p>
</form>