javascript - IE输入radio值总是返回 'on'而不是设置的值

Question

我正在动态创建一个表单并附加元素:

var input = document.createElement('input');
input.name = extension_id + '[]';
input.value = value.id;
input.className = 'changeable';
input.type = 'radio';
input.checked = true;
wrapper_div.appendChild(input);

作为生成的 HTML 的示例(来自 Chrome):

<input name="2[]" class="changeable" type="radio" value="5">

在 Chrome 和 Firefox 中，javascript:

document.getElementsByName("2[]")[0].value

按预期返回“5”，但在 IE 中(我的测试中为 IE9)，它返回“on”。

是否有某种原因导致 IE 忽略设置的值，而是返回已检查的状态？

Answer 1

基本上，这并不是值被忽略的问题，而是 IE 将元素视为对象(单选按钮)并对其进行初始化的问题之一。

如果您打开调试器并单步执行代码，您可以看到值 5 确实已设置。当您到达设置输入类型的行时，即 input.type='radio' 您可以看到该值从 5 更改为“on”。可以将其视为 IE 在知道输入确实是单选按钮时调用单选按钮的构造函数。

修复？

在这种情况下很简单，只需更改语句的顺序即可。是的!就那么简单。设置类型，然后设置值。

这在 IE9 和 Chrome 中工作正常。

{
    var extension_id = 2;
    var input = document.createElement('input');
    input.name = extension_id + '[]';
    input.type = 'radio';
    input.checked = true;
    input.value = 5;
    input.className = 'changeable';
    document.body.appendChild(input);

    alert(input.value);
}

哦，在我忘记之前 - 您可以使用 F12 在 IE 中打开调试器。 - 有很多关于如何使用它的视频。 :)