如何获得所选单选按钮的值？

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

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

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

这是获取任何输入类型值的最纯粹方法.您也不需要包含jQuery路径.

Answer 3

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

Answer 4

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

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

没有$('input[@name="genderS"]:checked').val();了,这是在jQuery的1.7(与工作@).

Answer 5

最简单的解决方案:

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

Answer 6

ECMAScript 6版

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

Answer 7

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

Answer 8

试试这个

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 9

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

首先，向Ashraf aaref致敬，我想稍微扩展一下他的答案。

正如 MDN Web 文档所建议的，使用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';

然而，人们也可以选择 via 的形式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 11

编辑:正如Chips_100所说,您应该使用:

var sizes = document.theForm[field];

直接不使用测试变量.

老答案:

你不应该eval喜欢这个吗？

var sizes = eval(test);

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

Answer 12

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

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.