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

IT技术 javascript html for-loop radio-button
2021-01-28 08:46:16

我的 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>
6个回答

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

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

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

这只有在选择一个时才有效。所以你应该先检查一下。 var selector = document.querySelector('input[name="genderS"]:checked'); if(selector) console.log(selector.value);
2021-03-11 08:46:16
使用 document.querySelector() 是一个纯 javascript 答案：developer.mozilla.org/en-US/docs/Web/API/document.querySelector
2021-03-24 08:46:16
@markus-zeller 在现代浏览器中，您可以使用链接运算符 (.?) 来保护无效，例如 document.querySelector('input[name="genderS"]:checked')?.value;
2021-03-28 08:46:16
如果将它存储在变量中并且没有选择单选按钮，则会导致浏览器停止。控制台说： TypeErrordocument.querySelector(...)是null.
2021-03-31 08:46:16
我正在 Meteor 中使用模板，这个:checked技巧对我来说完全适用..对我来说，从 Meteor 模板表单读取单选按钮的修复是accountType = template.find("[name='optradio']:checked").value;
2021-04-01 08:46:16

你可以这样做：

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>

提琴手

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

这适用于 jquery 1.7，但现在 jQuery 1.9 的正确语法是 $('input[name="genderS"]:checked').val(); （除掉 @）
2021-03-10 08:46:16
@TomPietrosanti 文档似乎有点偏离，jsfiddle.net/Xxxd3/608在 <1.7.2 中工作，但在 >1.8.3 中无效。无论如何，@绝对应该删除
2021-03-12 08:46:16
我相信@语法比那个更早被弃用（jquery 1.2）
2021-03-16 08:46:16
是的，看起来他们在那里留下了一些向后兼容性，但没有更新文档以匹配。我记得当他们放弃了一些仍然广泛使用的已弃用功能时有些喧嚣，所以他们重新添加了支持。也许这就是为什么......
2021-03-26 08:46:16
document.querySelector() 现在应该是直接 JavaScript 中推荐的方法。
2021-04-07 08:46:16 
document.forms.your-form-name.elements.radio-button-name.value
如果您的收音机在标签内，这种方式不起作用
2021-03-11 08:46:16
我想大多数人都忽略了这一点。接受的答案有效。Giorgos Tsakonas 的回答更好。但这是从根本上正确的答案。这就是单选按钮的实际工作方式。请注意，如果未选择任何内容，它将返回一个空字符串。
2021-03-17 08:46:16
@Web_Designer 你的评论不应该也是一个真正的答案吗？
2021-03-21 08:46:16
这也有效： document.forms.your-form-name.name-shared-by-radio-buttons.value
2021-03-28 08:46:16
如果您的单选输入不是一种形式，这将不起作用，所以我认为这不是比 querySelector 更好的答案，也许这两个应该合并。
2021-04-06 08:46:16

从 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;
其它你可能感兴趣的问题
上一篇如何在“--allow-file-access-from-files”模式下使用Chrome启动html？ 下一篇JavaScript 隐藏/显示元素