16

我们如何使用 DOM 访问单选按钮的值？

例如。我们有单选按钮：

<input name="sex" type="radio" value="male">

<input name="sex" type="radio" value="female">

它们位于带有 name 的表单中form1。当我尝试

document.getElementByName("sex").value

无论检查值如何，它总是返回“男性”。

4

12 回答 12

21

只是为了“生成” Canavar 非常有用的功能：

function getRadioValue(theRadioGroup)
{
    var elements = document.getElementsByName(theRadioGroup);
    for (var i = 0, l = elements.length; i < l; i++)
    {
        if (elements[i].checked)
        {
            return elements[i].value;
        }
    }
}

...现在将这样引用：

getRadioValue('sex');

奇怪的是，这样的东西还不是prototype.js的一部分。

于 2010-11-16T17:15:54.780 回答
15

令人惊讶的是，没有人建议实际使用 Selector API：

document.querySelector('input[name=sex]:checked').value

浏览器支持不错

于 2016-10-28T14:50:47.447 回答
8

如果您需要选择一个，大多数框架都支持这样的功能：

//jQuery
$("input[name='sex']:checked").val()
于 2009-03-02T21:58:06.373 回答
7

有几种方法。

1.在每个输入上放置一个id

<input name="sex" id="sex_male" type="radio" value="male">
<input name="sex" id="sex_female" type="radio" value="female">

然后你可以使用document.getElementById("sex_male")

2. 使用类似 PrototypeJS 的东西（jQuery 也可以）

然后你可以做这样的事情：

//This loops over all input elements that have a name of "sex"
$$('input[name="sex"]').each( function(elem) {
  //Do something
});

或者甚至只是为了获得“男性”单选按钮：

$$('input[name="sex"][value="male"]').each(function(elem) {
  //Do something
});

开始使用Prototype的一种简单方法是通过在页面的 <head></head> 标记之间添加它来从 Google 包含它：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
于 2009-03-02T21:53:25.370 回答
7

您可以通过此方法获取所选收音机的值：

<script>
function getRadioValue()
{
    for (var i = 0; i < document.getElementsByName('sex').length; i++)
    {
        if (document.getElementsByName('sex')[i].checked)
        {
            return document.getElementsByName('sex')[i].value;
        }
    }
}
</script>
于 2009-03-02T22:00:22.983 回答
2

如果您想要选择一个，但手边没有框架，您可以遍历元素数组以查找选中的那个：

for (var i = 0; i < document.form1.sex.length; i++) {
    if (document.form1.sex[i].checked) alert(document.form1.sex[i].value);
}
于 2009-03-02T22:01:12.607 回答
1

如果使用document.form1.sex，则会返回一个数组。

document.form1.sex[0]= 第一个单选按钮

document.form1.sex[1]= 第二个单选按钮

要检查哪个已检查，您需要循环：

whoChecked(document.form1.sex)

function whoChecked(fieldName) {
   for(var x=0;x<fieldName.length;x++) {
     if(fieldName[x].checked) {
        return fieldname[x].value
     }
}
于 2009-03-02T21:56:44.147 回答
1 
var list = document.getElementsByName('sex');
for(var i=0;i<list.length;i++){
   if(list[i].type=='radio' && list[i].checked){
      alert(list[i].value);
      break;
   }
}
于 2009-03-02T21:59:33.640 回答
1 
document.getElementByName("sex").value

你的意思是getElementsByName('sex')[0].value？（没有getElementByName。）

当然，这总是会选择第一个具有该名称的输入元素——其值确实是男性。然后，您可以使用“.checked”属性检查它是否被选中。

对于这个简单的案例，您可以摆脱：

var sex= document.getElementsByName("sex")[0].checked? 'male' : 'female';

对于一般情况，您必须遍历每个无线电输入以查看哪个被检查。首先获取表单对象可能会更好（在表单上放置一个id并使用document.getElementById通常比使用基于'name'的document.forms集合更好），然后访问form.elements.sex来获取列表，如果页面上有任何其他元素具有name="sex"属性（可能是表单字段以外的其他元素）。

于 2009-03-02T22:00:02.203 回答
0 
function getEleByName(){
    if(true==document.getElementsByName('gender')[0].checked){
        alert('selected gender is: male');
    }
    else{
        alert('selected gender is: female');
    }
}
于 2017-08-28T15:56:15.940 回答
-1
  • document.all.sex[0].checked
  • document.all.set[1].checked
于 2016-08-11T14:18:12.123 回答
-1

正如其他人所展示的那样，循环可以完成任务，但它可能比使用循环更简单，如果需要，这将有助于提高性能。此外，它可以是便携式/模块化的，因此可以用于不同的无线电组。

简单示例

function getValue(x) {
  alert(x.value);
}
<input name="sex" type="radio" value="male" onChange="getValue(this)" />
<input name="sex" type="radio" value="female" onChange="getValue(this)" />

一个更复杂的例子： 

function getValue(x){
  alert(x.value);
}
<fieldset>
  <legend>Sex</legend>
  <label>Male:
    <input name="sex" type="radio" value="male" onChange="getValue(this)"/>
  </label>
  <label>Female:
    <input name="sex" type="radio" value="female" onChange="getValue(this)" />
  </label>
</fieldset>
<fieldset>
  <legend>Age Group</legend>
  <label>0-13:
    <input name="ageGroup" type="radio" value="0-13" onChange="getValue(this)" />
  </label>
  <label>13-18:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>18-30:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>30+:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
</fieldset>

于 2015-09-23T20:42:53.493 回答