Question

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

例如。我们有单选按钮：

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

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

它们位于名称为form1的表单中。当我尝试

document.getElementByName("sex").value

它始终与“检查”值无关地返回“男性”。

Answer 1

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

Answer 2

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

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

Answer 3

有两种方法。

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的一种简单方法是在Google的＆lt; head＆gt;＆lt; / head＆gt;之间添加它。您网页的标签：

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

Answer 4

您可以通过以下方法获取所选无线电的值：

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

Answer 5

惊讶没有人建议实际使用Selector API：

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

Browser support is good

Answer 6

如果你想要选择一个，但没有框架，你可以迭代元素数组，寻找被检查的那个：

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

Answer 7

如果您使用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
     }
}

Answer 8

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

Answer 9

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"属性（可能不是表单字段）。

Answer 10

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

Answer 11

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

简单示例

＆＃13;

function getValue(x) {
  alert(x.value);
}

＆＃13;

<input name="sex" type="radio" value="male" onChange="getValue(this)" />
<input name="sex" type="radio" value="female" onChange="getValue(this)" />

＆＃13;

一个更复杂的例子：

＆＃13;

function getValue(x){
  alert(x.value);
}

＆＃13;

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

＆＃13;

Answer 12

document.all.sex [0] .checked
document.all.set [1] .checked

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

12 个答案:

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

2。使用PrototypeJS之类的东西（jQuery也可以）