Question

我猜想getElementById不能用于单选按钮，当你想获取它的值或找出它是否被检查？我这样说是因为我这样做了：

<input id="radio1" type="radio" name="group1" value="h264" checked="checked" />
<input id="radio2" type="radio" name="group1" value="flv" />

为了获得所选择的值，我做了这个：

function getRadioValue() {

    if(document.getElementById('radio1').value=='h264'){
        return 'h264';
    }
    else{
        return 'flv';
    }

}

然而，萤火虫不断告诉我：

document.getElementById("radio1") is null
[Break on this error] if(document.getElementById('radio1').checked==true){

我做错了什么？

全部谢谢

Answer 1

这是一个可靠的功能，可以选择单选按钮。由于单选按钮按name属性分组，因此使用getElementsByName ...

是有意义的

function getRadioVal(radioName) {
  var rads = document.getElementsByName(radioName);

  for(var rad in rads) {
    if(rads[rad].checked)
      return rads[rad].value;
  }

  return null;
}

在你的情况下，你会像这样使用它......

alert(getRadioVal("group1"));

Answer 2

您应该在加载文档后调用document.getElementById。尝试执行以下代码：

window.onload = function() {
    alert(getRadioValue());
}

Answer 3

正如其他人所指出的那样，您必须将代码置于加载/就绪事件中。

此外，您的代码将返回'h264'，您必须检查已检查的属性。

您必须遍历单选按钮才能找到被选中的按钮。

function getRadioValue()
{
    var radio1 = document.getElementById('radio1');
    var radio2 = document.getElementById('radio2');

    //You sould not hard code the value of HTML radio button in your code.
    //If you change value in HTML code, you will have to modify your JS code as well.
    return radio1.checked ? radio1.value : radio2.value;
}

此外，最好不要手动编写此JavaScript代码，而是使用类似jQuery的库。您的代码将变得如此简单，

$("input[name='group1']:checked").val();

Answer 4

这适用于我的机器;你尝试过如下的最小例子吗？

<html>
    <form>
        <input id="radio1" type="radio" name="group1" value="h264" checked="checked" />
        <input id="radio2" type="radio" name="group1" value="flv" />
    </form>
    <script type="text/javascript">
       alert(document.getElementById("radio1"));
    </script>
</html>

我的猜测是你不会等到创建radio1元素后引用它。使用DOMContentLoaded或load个活动。

Answer 5

Josh上面的注释非常有用，我稍作修改就停止了返回对象所有元素的函数 - 这对我来说似乎没问题

    function getRadioVal(radioName) {
      var rads = document.getElementsByName(radioName);
      for (var rad=0;rad<=rads.length-1;rad++) {
        if(rads[rad].checked) {
          return rads[rad].value; 
        }
      }
      return null;
    }

    alert(getRadioVal("group1"));

Answer 6

我总是将我的代码与iMacros Firefox插件创建的录音进行比较。它作为参考非常有用！

getElementById与Radio Buttons不太搭配

6 个答案: