IE中的InnerHTML / outerHTML不会反映复选框状态，除了在怪癖模式下 [英] InnerHTML/outerHTML in IE doesn't reflect checkbox state except in quirks mode
问题描述
我目前正在与IE JavaScript / DOM错误（有趣的）进行战斗，并且真正让我失望。有问题的代码将一些复选框复制到表单中，并需要保持其检查状态。问题是，IE（特别是IE8，虽然我猜其他人）也不想这样做。
I am currently battling an IE JavaScript/DOM bug (what fun) and it has truly stumped me. The code in question copies some checkboxes into a form and needs to maintain their checked state. Problem is, IE (specifically IE8, though I'm guessing others as well) doesn't want to do that.
我把bug本身缩小到非常小的测试用例。基本上，在页面上没有DOCTYPE的情况下，事情正常工作，但是当DOCTYPE存在时，它们会被打破。我会预料到相反的，但谁知道与IE。
I've narrowed down the bug itself to a very small test case. Basically, things work correctly without a DOCTYPE on the page but they are broken when a DOCTYPE is present. I would have expected the opposite, but who knows with IE.
以下是最简单的可能测试用例。对于每个人：在IE中打开页面，切换复选框，然后单击TEST。
Following are the simplest possible test cases. For each of them: open the page in IE, toggle the checkbox, then click "TEST".
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
document.getElementById('break').onclick = function() {
alert(document.getElementById('broken').outerHTML);
};
</script>
<!DOCTYPE html>
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
document.getElementById('break').onclick = function() {
alert(document.getElementById('broken').outerHTML);
};
</script>
该错误发生在有效页面上（< html> ，< head> ，< body> 等）以及输入是否在表单内。在破碎的情况下，outerHTML总是反映页面加载中存在的内容（如果默认情况下检查输入，则始终使用CHECKED警报代码，即使我先取消选中它）。如果我包装输入并使用innerHTML，事情会发生相同的方式。在实际的网站上，我使用jQuery的.clone（）方法进行复制; .clone（）在内部使用.outerHTML，这就是我如何缩小这一点。
The bug occurs on valid pages (with <html>, <head>, <body>, etc) and whether or not the input is inside a form. In the "broken" case, outerHTML always reflects what was present on page load (if I have the input checked by default then it always alerts code with CHECKED, even if I uncheck it first). Things happen the same way if I wrap the input and use innerHTML. On the actual site I am using jQuery's .clone() method to do the copying; .clone() uses .outerHTML internally and that's how I narrowed this down.
我的问题是：是否有围绕这个手段自己手动构建新的HTML吗？任何人都有任何想法为什么首先发生这种情况（IE SUX LOLZ除外）？
My question is this: is there a way around this short of manually building new HTML myself? And does anyone have any idea WHY this happens in the first place (other than "IE SUX LOLZ")?
推荐答案
有一般问题与 innerHTML 和表单属性。不仅仅是在IE（（在FF中更糟糕的是，它不会更新innerHTML中的checked属性））...
There are problems in general with innerHTML and form properties. Not just in IE ((its worse in FF, it will NEVER update the checked property in innerHTML))...
你可以尝试解决这个问题链接的问题：
You can try this to work around the issue in the linked question:
document.getElementById('break').onclick = function() {
var broken = document.getElementById('broken');
if (broken.checked) broken.setAttribute('checked','checked');
else broken.removeAttribute('checked');
alert(broken.outerHTML);
};
这篇关于IE中的InnerHTML / outerHTML不会反映复选框状态，除了在怪癖模式下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
