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

就像标题所说的那样，在一个页面上获取具有给定名称的所有单选按钮的最佳方式是什么？最终，我将使用此选项确定选择了哪个特定单选按钮，因此，另一种表达问题的方式是：

在JavaScript中给定一个字符串变量，我如何判断当前选择了哪个确切的单选按钮输入元素（如果有的话）以及该字符串的名称

---

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

您可以使用

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

函数getCheckedValue（groupName）{
var radios=document.getElementsByName（groupName）；
对于（i=0；i

使用文档。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> 

致：

var options=document.getElementsByName（'myRadioButtons'）；
对于（i=0；i

我想知道jQuery的答案

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

选择1
选择2
var formElements=window.document.getElementById（“myForm”）.elements；
var-formElement；
无线电波阵列=[]；
对于（变量i=0，j=0；i

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

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

var radios=document.getElementsByTagName（'input'）；
对于（i=0；i

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

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

querySelectorAll（）

方法可用于按名称获取特定类型的元素。在某些情况下，与使用

getElementsByName（）

相比，使用

querySelectorAll

有很多优点。如果对

文档

以外的任何内容使用

getElementsByName

，则会出现错误：

元素\u Name\u Here.getElementsByName不是函数

但是

querySelectorAll（）

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

html

剧本

函数getOnlyThisRowsRadios（thiz）{
变量i、L、父元素、单选按钮；
parentElement=thiz.parentNode；//获取元素的父元素
radioButtons=parentElement.querySelectorAll（“输入[name='NameOfName']”）；
console.log（'单选按钮：'+单选按钮）
L=单选按钮。长度；
console.log（'L:'+L）
对于（i=0；i，如果您的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])
    }
}

var radios=document.getElementsByTagName（'input'）；
对于（i=0；i
这可能包括同名的
。嗯……我认为这不可行，因为有复选框。这是一种主要问题。但我现在意识到我可以在if条件中添加一个表达式，以按标记名过滤掉它们，所以这对我来说应该是可行的。@Joel:我想你的意思是按
类型过滤掉它们de>.tagname将是相同的“输入”.getElementsByName vs getElementByName多棒啊。我知道。我已经详细写过了：但这不取决于我。哇，添加到Wikipedia/Javascript的链接是件好事，因为我完全是个笨蛋ess！@Peter Mortensen:对编辑触发器有点满意，不是吗？我认为document.form.groupFoo[I]。值应该是document.formFoo.groupFoo[I]。value。@Phaedrus，我修改了整个函数，这次实际测试了它，但你是对的。
var selectedValue = $("input[name='radio_name']:checked").val();

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

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

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

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

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

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

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