IE中的InnerHTML/outerHTML不会反映复选框状态,除非在怪异模式下

Mat*_*tor 8 javascript jquery doctype internet-explorer dom

我目前正在与一个IE JavaScript/DOM bug(很有趣)进行斗争,这真的让我很难过.有问题的代码会将一些复选框复制到一个表单中,并需要保持其已检查状态.问题是,IE(特别是IE8,虽然我也猜测其他人)不想这样做.

我已经将bug本身缩小到一个非常小的测试用例.基本上,在页面上没有DOCTYPE的情况下工作正常,但是当DOCTYPE存在时它们会被破坏.我本来期望相反,但谁知道IE.


以下是最简单的测试用例.对于每个人:在IE中打开页面,切换复选框,然后单击"TEST".

不会产生错误:

<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
 document.getElementById('break').onclick = function() {
  alert(document.getElementById('broken').outerHTML);
 };
</script>
Run Code Online (Sandbox Code Playgroud)

链接

产生错误:

<!DOCTYPE html>
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
 document.getElementById('break').onclick = function() {
  alert(document.getElementById('broken').outerHTML);
 };
</script>
Run Code Online (Sandbox Code Playgroud)

链接

错误发生在有效页(与<html>,<head>,<body>等)和输入是否是一个形式的内部.在"破碎"的情况下,outerHTML总是反映页面加载时出现的内容(如果我默认选中了输入,那么即使我首先取消选中它,它总是使用CHECKED警告代码).如果我包装输入并使用innerHTML,事情就会以同样的方式发生.在实际的网站上我使用jQuery的.clone()方法进行复制; .clone()在内部使用.outerHTML,这就是我缩小范围的方法.


我的问题是:有没有办法自己手动构建新的HTML?有没有人知道为什么会发生这种情况(除了"IE SUX LOLZ"之外)?

gna*_*arf 5

一般问题,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);
};
Run Code Online (Sandbox Code Playgroud)