Javascript IE中的InnerHTML/outerHTML不'；除非处于怪癖模式，否则不能反映复选框状态

我目前正在与一个IE JavaScript/DOM错误作斗争（多么有趣），它真的难住了我。有问题的代码将一些复选框复制到表单中，并需要保持其选中状态。问题是，IE（特别是IE8，尽管我猜其他人也一样）不想这样做

我已经将bug本身缩小到一个非常小的测试用例。基本上，如果页面上没有DOCTYPE，事情就可以正常工作，但是如果有DOCTYPE，它们就会被破坏。我本以为会是相反的，但谁知道IE呢

---

下面是最简单的测试用例。对于每个选项：在IE中打开页面，切换复选框，然后单击“测试”

不会产生错误：

试验
document.getElementById（'break'）。onclick=function（）{
警报（document.getElementById（'breaked'）.outerHTML）；
};

产生错误：

试验
document.getElementById（'break'）。onclick=function（）{
警报（document.getElementById（'breaked'）.outerHTML）；
};

该错误发生在有效页面上（使用

，

，

等）以及输入是否在表单中。在“断开”的情况下，outerHTML总是反映页面加载中出现的内容（如果我在默认情况下选中了输入，那么它总是用选中的内容来警告代码，即使我先取消选中它）。如果我包装输入并使用innerHTML，情况也是如此。在实际站点上，我使用jQuery的.clone（）方法进行复制。clone（）在内部使用.outerHTML，这就是我缩小范围的方法

---

---

我的问题是：有没有一种方法可以解决我自己手动构建新HTML的不足？有人知道为什么会发生这种情况吗（除了“IE SUX LOLZ”）？

使用复选框的DOM等效对象

将它添加到DOM表单中，不要使用HTML和这种肮脏的方式

为清楚起见：

var domCheckBox=document.getElementById('mycheckboxID');
var domForm=document.getElementById('myformID');
domForm.appendChild(domCheckBox);

这会将您的复选框添加到表单中，并保留选中状态（和其他）。

有with

innerHTML

和表单属性。不仅在IE中（（在FF中更糟糕，它永远不会更新innerHTML中的checked属性））

您可以尝试以下方法来解决链接问题中的问题：

document.getElementById('break').onclick = function() {
  var broken = document.getElementById('broken');
  if (broken.checked) broken.setAttribute('checked','checked');
  else broken.removeAttribute('checked');
  alert(broken.outerHTML);
};

---

最后，我根据以下内容为.clone（）编写了一个包装器：

---

它不是很通用（例如，如果您尝试克隆包含输入的元素，它将不起作用），但在这种情况下，它似乎起到了作用。

两个版本，无论是否选中复选框，都会在Firefox 3.6.3中输出

未定义的

。在Chromium 5.0.375.70和Opera 10.10中，两个版本都发出警报

（所有浏览器都在Linux中运行）。可能相关？--@吹，@Marcel:Firefox不支持.outerHTML。我实际上使用的是jQuery的.clone（）方法，它在Firefox中使用.cloneNode（），所以这不是问题。这是一个具体的IE问题。我的测试使用outerHTML的唯一原因是jQuery在IE中使用它。因为FF和friends支持cloneNode（），所以使用它，它没有这个问题。不过，你的变通方法似乎奏效了；我会接受的，除非有人尽快发布更简单的东西。谢谢@Matt–那么这就是clone（）中的一个bug（顺便说一句，很好的源代码查看器）。还有一个问题：为什么需要这个函数？你想用它达到什么目的？@Marcel：我有一个表单，它有一个“子表单”，出现在覆盖图中。用户正在创建一个事件；基本表单设置事件属性，覆盖允许邀请用户参加事件。用户处理完子表单后，其复选框将复制回基本表单（并隐藏），以便服务器知道提交后要邀请谁。我不一定需要使用.clone（），但它在其他地方都可以使用，而且非常简单，所以如果它在IE中也可以使用，那就太好了。这将移动原始复选框。我需要复制/克隆它。如何使用domCheckBox.cloneNode（）？中的注释对此进行了说明：“IE在使用cloneNode时复制通过attachEvent绑定的事件。对克隆调用detachEvent也将从原始信号中删除事件。为了解决这个问题，我们使用innerHTML。不幸的是，这意味着对IE中仅存储为属性的属性的某些修改将不会被复制（例如输入上的name属性）。“detachEvent->cloneNode->AttachEvent如果该方法有效并且没有jQuery注释中提到的任何缺点，那么。clone（）我现在没有时间准备一套完整的测试，但是如果有人这样做的话，我会的。

var domCheckBox=document.getElementById('mycheckboxID');
var domForm=document.getElementById('myformID');
domForm.appendChild(domCheckBox);

document.getElementById('break').onclick = function() {
  var broken = document.getElementById('broken');
  if (broken.checked) broken.setAttribute('checked','checked');
  else broken.removeAttribute('checked');
  alert(broken.outerHTML);
};

$.fn.inputClone = function(events) {
    this.each(function() {
        this.attr('value', this.value);

        if(this.checked) this.setAttribute('checked', 'checked');
        else this.removeAttribute('checked');

        if(this.selected) this.setAttribute('selected', 'selected');
        else this.removeAttribute('selected');
    });
    return this.clone(events);
};