JavaScript 读取 IE 和 FireFox 中的单选按钮值答案

【问题标题】：JavaScript read radio button value in IE and FireFoxJavaScript 读取 IE 和 FireFox 中的单选按钮值
【发布时间】：2014-10-12 18:28:41
【问题描述】：

我有一个使用 JavaScript 构建 POST 语句的简单 Web 表单。在 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 中的无线电输入的检查值时，我是否缺少某些东西？

【问题讨论】：

标签： javascript html forms radio-button

【解决方案1】：

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

使用不同的 ID。

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

【讨论】：

名称应该相同
是的，我的错，得意忘形了.. :-)

【解决方案2】：

如上所述，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>

【讨论】：

这应该可以，但它不适合我。在 IE 和 FireFox 中，当我检查 env 的值时，它总是未定义。我也在使用这种精确的语法...
一开始我错了。 form.elements['env'] 返回一个数组，您必须遍历它才能找到选择了哪个按钮。这类似于我看到的@Afsa 已经发布的内容，但不同之处在于我直接使用表单而不是查询所有按钮的 DOM。更改选择时，这在 Firefox 中正常工作。

【解决方案3】：

试试这个

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。

【讨论】：

这很漂亮，而且效果很好。谢谢，谢谢，谢谢。

【解决方案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>

【讨论】：

【解决方案5】：

你可以试试这个：

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

【讨论】：