Home/ Questions/Q 871711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T10:40:53+00:00

I am currently battling an IE JavaScript/DOM bug (what fun) and it has truly

  • 0

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.

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.

Following are the simplest possible test cases. For each of them: open the page in IE, toggle the checkbox, then click “TEST”.

Does not produce the bug:

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

Link

Produces the bug:

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

Link

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.

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”)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
};
    • 0