innerHTML 忽略 IE8 中复选框和单选框输入的 DOM 更改

Question

我想获取表单元素的更新后的 DOM html 字符串（例如<input type="text">、<input type="radio">、<input type="radio">、<textarea>）。

我发现了这个问题，我正在尝试使用 gnarf 编写的formhtml 插件：

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

问题是它可以在 Firefox 和 Chrome 中运行，但只能在 IE8 中部分运行（其他版本我没有测试过）。

如果您在 IE8 中打开以下页面，您可以看到有一个文本框、一些复选框和单选框。尝试输入一些文本并选中复选框和单选框。

http://jsfiddle.net/e9j6j/1/

然后点击“点击”按钮。

您可以看到，无论我是通过本机 DOM 对象的 innerHTML 属性还是使用插件的 formhtml() 函数来检索 html 字符串。返回的 html 仅反映文本框的 value 属性的变化，即使您在单击按钮之前已经检查过<input type="radio"> 和 <input type="checkbox"> 中的 checked="checked" 属性，也永远看不到它们。

为什么会发生这种情况，我怎样才能让它在 IE 中工作？

提前致谢。

编辑： 我很抱歉。我在我的问题中犯了一些错误，现在它已被重写。

编辑： 创建示例代码是为了演示我的问题，但我犯了一些错误。 IE7 和 IE8 都给出了预期的结果（我也再次进行了测试）。

在我的原始代码中，我没有直接在$('#div1') 上使用formhtml() 函数，而是在使用formhtml() 之前克隆它，如下所示：

alert($('#div1').clone().formhtml());

在带有 jQ​​uery 1.3.2 的 IE8 上，返回的 html 不反映这些复选框和单选框的选中状态，我从没想过这会是 clone() 函数的问题，这就是为什么当我创建示例代码时，我没有克隆它，因此无法证明实际问题。

更新的示例代码在这里（jQuery版本更改为1.3.2）：

http://jsfiddle.net/e9j6j/4/

这可能说明IE8上clone()函数的问题（我现在没有IE8，我回家测试一下，稍后再报告）。

编辑：

我刚刚做了测试。确实是 IE8 上 jQuery 1.3.2 中 clone() 函数的问题。它无法复制复选框和收音机的状态。将其更改为 jQuery 1.5.1 后。效果很好。

Answer 1

我在 IE8 和 IE7 上尝试了 http://jsfiddle.net/e9j6j/1/ 的测试用例，它们对我有用。

复制问题的步骤：

1. 在IE浏览器中加载http://jsfiddle.net/e9j6j/1/。
2. 在文本字段中输入文本，选中第一个单选按钮，选中第一个复选框。
3. 按“点击”按钮。

预期结果：

两个警报都在文本字段中显示值，在第一个单选框和第一个复选框上显示“已检查”状态。

实际结果：

正如预期的那样。但是，请记住，IE 对 DOM 的表示意味着 checked="checked" 实际上报告为 CHECKED，但它是正确的。

更新：

增加了一个测试，确保checked状态可以复制到一个新的dom节点：

$('#btn1').click(function() {
    alert($('#div1').formhtml());
    alert(document.getElementById('div1').innerHTML);

    var div1 = $('#div1');
    div1.clone().insertAfter(div1);
});

这会创建另一组保留原始输入状态的字段。 View on jsfiddle.