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

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>

- mkyong

---

可能是重复的问题，参考如何使用js获取选中的单选按钮值。 - Damjan Pavlica

Answer 1

这适用于任何浏览器。

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

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

- Giorgos Tsakonas

---

使用 document.querySelector() 是一个纯 JavaScript 的解决方案：https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector - AdamJonR

如果您将其存储在一个变量中并且没有选择单选按钮，那么您会导致浏览器停止。控制台会显示：TypeError document.querySelector（...）为null。 - call-me

只有在选择了一个选项时才有效。因此，在使用前应进行检查。var selector = document.querySelector('input[name="genderS"]:checked'); if(selector) console.log(selector.value); - Markus Zeller

我正在使用Meteor中的模板，而:checked技巧完全解决了我的问题。对于我来说，从Meteor模板表单中读取单选按钮的修复方法是accountType = template.find("[name='optradio']:checked").value;。 - zipzit

@markus-zeller 在现代浏览器中，您可以使用链式操作符(.?)来防范nullish，例如：document.querySelector('input[name="genderS"]:checked')?.value; - Simon

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

- jbabey

---

那个适用于 jQuery 1.7 的写法，但现在适用于 jQuery 1.9 的正确语法是 $('input[name="genderS"]:checked').val(); （去掉 @ 符号）。 - jptsetung

我相信 @ 语法比那个更早就被弃用了（jQuery 1.2）。 - Tom Pietrosanti

我喜欢你在这里使用 length。就像未来已经内置了一样。 - Lori

现在在纯JavaScript中，document.querySelector() 可能是推荐的方法。 - Dave

for...of 在所有现代浏览器中都受支持，而且更易于阅读 / 理解。因此 for (let radio of radios) { \\do stuff } - brandonmack

Answer 3

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

- imran ansari

---

这个也可以用：document.forms.your-form-name.name-shared-by-radio-buttons.value。 （意为这个代码也可行：document.forms.your-form-name.name-shared-by-radio-buttons.value。） - Web_Designer

我认为大多数人都忽视了这一点。所接受的答案是可以的，Giorgos Tsakonas的答案更好。但这个回答才是根本正确的答案。这就是单选按钮的实际工作原理。请注意，如果没有选择任何选项，则返回空字符串。 - Mark Goldfain

Answer 4

自从jQuery 1.8版本以后，查询的正确语法为：

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

不再使用 $('input[@name="genderS"]:checked').val();，该语法在jQuery 1.7中是有效的（使用了@）。

- jptsetung

Answer 5

ECMAScript 6 版本

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

- Nappy

Answer 6

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

- Rachie M

---

这是一个非常好的答案！querySelector :checked 是一个不错的技巧，但我也喜欢 .find() 方法。 - Stephen Jenkins

Answer 7

如果有人像我一样在寻找答案并进入了这里，从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/zh-CN/docs/Web/API/RadioNodeList/value

- ashraf aaref

---

我真的认为这是今天首选的方法。但是，人们也可以通过 querySelector 选择表单，这也很好用：const form = document.querySelector('form[name="somename"]')。此外，还可以使用 radios.value = {value} 设置 radios 的值。然而，直接选择单选按钮（例如 document.querySelectorAll('input[name="some_radio"]')）将不起作用，因为它返回的是 NodeList 而不是 RadioNodeList。这就是为什么您必须先选择表单的原因。 - ptmr.io

Answer 8

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

var sizes = document.theForm[field];

不使用测试变量直接运行。

---

旧答案：

你应该像这样使用 eval 吗？

var sizes = eval(test);

我不知道那是怎么工作的，但在我看来你只是在复制一个字符串。

- Michael Laffargue

---

这里不是最佳选项 eval... 你可能想说 var sizes = document.theForm[field]; 并删除第一个赋值，所以不再使用 test 变量。 - Dennis

根据我的了解，eval是否可以直接使用？还是只能使用 eval('var sizes=document.theForm.' + field) 这种形式？ - Michael Laffargue

你的回答中的eval语句var sizes = eval(test);会按照那种方式工作（我刚在Firebug中测试过）。 - Dennis

这样更有意义，但我在放括号的地方出现了错误“意外的标记["field]`。你猜为什么会这样？ - mkyong

Answer 9

试试这个

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

这里有一个示例。

- The Alpha

Answer 10

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

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

代码的解释如下：

• 第1行：获取一个引用，该引用（a）是类型的控件，（b）具有名称属性genderS，（c）已选中。
• 第2行：如果存在这样的控件，则返回其值。如果不存在，则返回空字符串。如果第1行找到控件，则genderSRadio变量为真值；如果没有找到，则为null/falsey。

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

- Ed Gibbs