在javascript中,如何获取页面中具有给定名称的所有单选按钮?

你可以使用 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;
}

use 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)  {

GetElementsByName不适合我。我这样做了:

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

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

我会咬住jquery的答案

var selectedValue = $("input[name='radio_name']: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>

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

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

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

这个 querySelectorAll() 方法可用于按名称获取特定类型的元素。使用有好处 querySelectorAll 与…相比 getElementsByName() 在某些情况下。如果你使用 getElementsByName 除了 document ,您将得到一个错误:

element_name_here.getelementsbyname不是函数

但是 查询选择单元格()。 可用于文档的子元素。当您想从多个结构相同的元素(列表中的行)中提取一个元素时,这很有用。在这种情况下,您可能不想尝试为每一行提供单独的ID。在这种情况下,可以传递调用的函数 this ,获取ParentNode,然后从父节点中搜索特定属性。这样可以避免搜索整个文档。

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
  }