Question

我有一个简单的Web表单，它使用JavaScript来构建POST语句。在Chrome中，我可以使用一行简单的代码......

var form = document.forms['myForm'];
var env = form.env.value;

表单本身就是这样......

<form name="myForm" action='JavaScript:xmlhttpPost("/path/to/some/pythoncode.py")'>
    <input type="radio" name="env" id="env" value="inside">Inside
    <input type="radio" name="env" id="env" value="outside" checked="checked">Outside
    <input type="radio" name="env" id="env" value="both">Both
    <input type="radio" name="env" id="env" value="neither">Neither

我在表单上有一些文本框，我可以使用相同的技术来查找值（ var name = form.fname.value 用一个 <input type="text" name="fname" id="fname"> 但是，当我提交表单并构建我的帖子时，单选按钮的值始终未定义。它在Chrome中运行良好，但在IE或FireFox中没有任何功能。

我尝试var env = document.getElementById('env').value，但由于某种原因，无论我选择什么，它总是默认为第一个值（内部）。使用Chrome时，该方法也不会返回值。

在FF或IE中读取无线电输入的选中值时，我是否缺少某些东西？

Answer 1

试试这个

function getValueFromRadioButton(name) {
   //Get all elements with the name
   var buttons = document.getElementsByName(name);
   for(var i = 0; i < buttons.length; i++) {
      //Check if button is checked
      var button = buttons[i];
      if(button.checked) {
         //Return value
         return button.value;
      }
   }
   //No radio button is selected. 
   return null;
}

ID是唯一的，因此您不应对多个项目使用相同的ID。如果使用此功能，则可以删除所有单选按钮ID。

Answer 2

您对多个元素使用相同的ID，ID对于页面上的元素是唯一的。

使用不同的ID。

编辑：名称可以相同。因为那时单选按钮就是一组。

Answer 3

如上所述，ID应该不同才有效，但您可以通过一起消除ID并仅使用输入名称来实现此目的：

var form = document.forms['myForm'];
var radios = form.elements["env"];
var env = null;
for(var i=0;i<radios.length;i++) {
    if(radios[i].checked == true) {
        env = radios[i].value;
    }
}

<form name="myForm">
<input type="radio" name="env" value="inside">Inside
<input type="radio" name="env" ivalue="outside" checked="checked">Outside
<input type="radio" name="env" value="both">Both
<input type="radio" name="env" value="neither">Neither
</form>

Answer 4

在ES-2015上简短明了，与Babel配合使用：

function getValueFromRadioButton( name ){
  return [...document.getElementsByName(name)]
         .reduce( (rez, btn) => (btn.checked ? btn.value : rez), null)
}

console.log( getValueFromRadioButton('payment') );

<div>  
  <input type="radio" name="payment" value="offline">
  <input type="radio" name="payment" value="online">
  <input type="radio" name="payment" value="part" checked>
  <input type="radio" name="payment" value="free">
</div>

Answer 5

您可以尝试以下方法：

var form = document.querySelector('form#myForm');
var env_value = form.querySelector('[name="env"]:checked').value;

JavaScript在IE和FireFox中读取单选按钮值

5 个答案: