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

Question

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

16

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

例如，我们有以下单选按钮：

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

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

他们在一个名为form1的表单内。当我尝试

document.getElementByName("sex").value

它无论选中的值是什么，始终返回“male”。

- akhil

12个回答

15

非常惊讶没有人建议使用选择器API：

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

浏览器支持很好

- Daniel Worthington-Bodart

啊，刚注意到这个评论在最后。我在上面添加了我的评论，引用了MDN的方法使用参考和W3Schools的选择器语法。结合你提供的浏览器支持链接，人们应该能够解决问题。如果你不想使用框架，只需使用document.querySelector。还可以查看更完整的CSS选择器语法列表。 - user2895783

如果单选按钮在表单外部，它也能正常工作。非常感谢。 - traktor

8

如果你需要选中一个元素，大多数框架都支持类似以下的功能：

//jQuery
$("input[name='sex']:checked").val()

- Eric

肯定应该是 :checked，还要注意的是，两个单选按钮都未被选择的情况下，val() 调用将会失败。 - bobince

如果您不想使用框架，只需使用document.querySelector。此外，请查看更完整的CSS选择器语法列表。 - user2895783

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

在网页的<head></head>标签之间添加以下代码，就可以通过Google轻松开始使用Prototype了：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>

- Mark Biek

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>

- ScarletGarden

2

如果你想要选中某个元素，但没有框架可以使用，你可以遍历元素数组，找到被选中的元素：

for (var i = 0; i < document.form1.sex.length; i++) {
    if (document.form1.sex[i].checked) alert(document.form1.sex[i].value);
}

- Jarret Hardie

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

- Diodeus

虽然这种方法确实有效，但我认为它有点脆弱。如果重命名表单或更改HTML元素的顺序，则最终需要记住要更改的很多内容。 - Mark Biek

对于那些尝试使用这段代码的人：应该使用“fieldName”而不是“fieldname”作为返回值。否则会导致JS错误。 - KLXN

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

- Manu

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"属性的元素（可能是表单字段之外的其他内容）。

- bobince

0

function getEleByName(){
    if(true==document.getElementsByName('gender')[0].checked){
        alert('selected gender is: male');
    }
    else{
        alert('selected gender is: female');
    }
}

- LN G

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Canuckster · Accepted Answer

只是为了“泛化”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的一部分。