在 JavaScript 中，如何获取页面中具有给定名称的所有单选按钮？答案

【问题标题】：In JavaScript, how can I get all radio buttons in the page with a given name?在 JavaScript 中，如何获取页面中具有给定名称的所有单选按钮？
【发布时间】：2009-11-05 19:29:47
【问题描述】：

正如标题所说，JavaScript 中获取具有给定名称的页面上的所有单选按钮的最佳方式是什么？最终我将使用它来确定选择了哪个特定的单选按钮，所以用另一种方式来表达这个问题：

给定 JavaScript 中的字符串变量，我如何知道当前选择了哪个带有该字符串的确切单选按钮输入元素（如果有），因为它的名称是？

我不使用 jQuery。如果您想提供 jQuery 答案，请继续。其他人可能会发现它很有用。但这对我没有帮助，我也不会投票。

【问题讨论】：

我知道是的。我已经详细写过：stackoverflow.com/questions/148670/…但这不取决于我。
哇，添加了指向 Wikipedia/Javascript 的链接真是一件好事，因为我完全一无所知！
@Peter Mortensen：对编辑触发器有点高兴，不是吗？

标签： javascript radio-button

【解决方案1】：

您可以使用document.getElementsByName()，传递无线电组的名称，然后循环检查checked 属性，例如类似：

function getCheckedValue( groupName ) {
    var radios = document.getElementsByName( groupName );
    for( i = 0; i < radios.length; i++ ) {
        if( radios[i].checked ) {
            return radios[i].value;
        }
    }
    return null;
}

【讨论】：

这可能包括同名的<input type="checkbox" />。
嗯...我在想这不能工作，因为复选框。这是主要的问题。但我现在意识到我可以在 if 条件中添加一个表达式来通过标记名过滤掉它们，所以这应该对我有用。
@Joel：我认为您的意思是通过type 过滤掉它们。标记名将是相同的“输入”。
具有相同name属性的复选框无论如何都会搞砸表单提交，所以我不会担心。
getElementsByName vs getElementByName 真是个鳄鱼。

【解决方案2】：

getElementsByName 对我不起作用。我这样做了：

    var radios = document.getElementsByTagName('input');
    for (i = 0; i < radios.length; i++) {
        if (radios[i].type == 'radio' && radios[i].checked) {
            nbchecked++;
        }
    }

【讨论】：

【解决方案3】：

使用 document.getElementsByName() 是对您提出的问题的简短回答。

但是，这样做可能会更好：

<form name="formFoo">
  Foo: <input type="radio" name="groupFoo" value="foo" checked> <br />
  Bar: <input type="radio" name="groupFoo" value="bar"> <br />
  Baz: <input type="radio" name="groupFoo" value="baz"> <br />
  <input type="submit" >
</form>

然后使用 JavaScript：

function getRadioValue(formName, groupName) {
    var radioGroup = document[formName][groupName];
    for (var i=0; i<radioGroup.length; i++)  {
       if (radioGroup[i].checked)  {
       return radioGroup[i].value;
       }
    }
    return null;
}

通过这样做，您可以避免使用搜索整个文档的函数。它只是首先搜索表单，然后在该表单中搜索具有相同名称的控件。这里的问题是，如果您在表单中间有一个同名复选框，则可能会返回它而不是正确的单选值。如果以相同的名称抛出另一种类型的控件，则可能会导致错误。这两种情况可能都应该被认为是程序员错误，但是扩展函数来检查它们并没有什么坏处，但会有一些潜在的性能损失。换行就好了：

       if (radioGroup[i].checked)  {

到：

       if (radioGroup[i].type=='radio' && radioGroup[i].checked)  {

【讨论】：

我认为 document.form.groupFoo[i].value 应该是 document.formFoo.groupFoo[i].value。
@Phaedrus，我修改了整个函数，这次实际测试了一下，但你是对的。

【解决方案4】：

我会为 jQuery 的答案而努力

var selectedValue = $("input[name='radio_name']:checked").val();

【讨论】：

【解决方案5】：

var options = document.getElementsByName('myRadioButtons');
for(i = 0; i < options.length; i++)
{
    var opt = options[i];
    if(opt.type=="radio")
    {              
        if(opt.checked)
        {
        }                  
    }
}

【讨论】：

【解决方案6】：

<form name="myForm" id="myForm" action="">  
<input type="radio" name="radioButton" value="c1">Choice 1
<input type="radio" name="radioButton" value="c2">Choice 2
</form>
<script>
var formElements = window.document.getElementById("myForm").elements;
var formElement;
var radioArray = [];

for (var i = 0, j = 0; i < formElements.length; i++) {
    formElement = formElements.item(i);
    if (formElement.type === "radio" && formElement.name === "radioButton") {
        radioArray[j] = formElement;
        ++j;
    }
}
alert(radioArray[0].value);
alert(radioArray[1].value);
</script>

【讨论】：

【解决方案7】：

$("input[type='radio'][name='xxxxx']:checked").val()

【讨论】：

【解决方案8】：

直接按名称获取所有单选按钮：

element.querySelectorAll("input[name='nameOfTheName']")

querySelectorAll() 方法可用于通过名称获取某种类型的元素。在某些情况下，使用querySelectorAll 与getElementsByName() 相比具有优势。如果你在document 以外的任何地方使用getElementsByName，你会得到一个错误：

element_Name_Here.getElementsByName 不是函数

但querySelectorAll() 可以用于文档的子元素。当您想要从所有具有相同结构的多个元素（列表中的行）中获取一个元素时，这很有帮助。在这种情况下，您可能不想尝试为每一行提供单独的 ID。在这种情况下，调用的函数可以传递this，获取父节点并从父节点中搜索特定属性。这样可以避免搜索整个文档。

html

<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>

脚本

function getOnlyThisRowsRadios(thiz) {
  var i,L,parentElement,radioButtons;

  parentElement = thiz.parentNode;//Get the parent of the element
  radioButtons = parentElement.querySelectorAll("input[name='nameOfTheName']");
  console.log('radioButtons: ' + radioButtons)

  L = radioButtons.length;
  console.log('L: ' + L)

  for (i=0;i<L;i++) {
    console.log('radBttns[i].checked: ' + radBttns[i].checked)
    radBttns[i].checked = false;//Un-check all checked radios
  }

【讨论】：

【解决方案9】：

如果您的 name 属性被用作其他东西，这绝对有效。

var radios = document.getElementsByTagName('input');

 for (i = 0; i < radios.length; i++) {
    if (radios[i].type == 'radio' && radios[i].checked) {
console.log(radios[i])
    }
}

【讨论】：