title: innerHTML ignores DOM changes for checkbox and radio input in IE8
body: <p>I would like to get the updated DOM html string for the form elements (e.g. <code>&lt;input type="text"&gt;</code>, <code>&lt;input type="radio"&gt;</code>, <code>&lt;input type="radio"&gt;</code>, <code>&lt;textarea&gt;</code>).</p>
  
  <p>I found this question and I am trying to use the <code>formhtml</code> plugin written by gnarf:</p>
  
  <p><a href="https://stackoverflow.com/questions/1388893/jquery-html-in-firefox-uses-innerhtml-ignores-dom-changes">jQuery html() in Firefox (uses .innerHTML) ignores DOM changes</a></p>
  
  <p>The problem is that it works in Firefox and Chrome but only works partially in IE8 (I have not tested other versions).</p>
  
  <p>If you open the following page in IE8, you can see there is a text box, some checkboxes and radios. Try entering some text and check the checkboxes and radios.</p>
  
  <p><a href="http://jsfiddle.net/e9j6j/1/" rel="nofollow noreferrer">http://jsfiddle.net/e9j6j/1/</a></p>
  
  <p>Then click on the 'Click' button.</p>
  
  <p>You can see that no matter I am retrieving the html string through the <code>innerHTML</code> property of a native DOM object or by using the <code>formhtml()</code> function of the plugin. The html returned only reflects the changes in the <code>value</code> attribute of the textbox, you can never see the <code>checked="checked"</code> attributes in <code>&lt;input type="radio"&gt;</code> and <code>&lt;input type="checkbox"&gt;</code> even you have already checked them before clicking the button.</p>
  
  <p>Why is this happening, and how I can make it work in IE?</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>EDIT:</strong>
  I am sorry. I made some mistakes in my question, now it has been rewritten.</p>
  
  <p><strong>EDIT:</strong>
  The sample codes were created to demonstrate my problem but I made some mistakes. Both IE7 and IE8 do give expected results (I also did the tests again). </p>
  
  <p>In my original codes, I do not directly use <code>formhtml()</code> function on the <code>$('#div1')</code> but rather clone it before using <code>formhtml()</code> like this:</p>
  
  <p><code>alert($('#div1').clone().formhtml());</code></p>
  
  <p>And on IE8 with jQuery 1.3.2, the returned html does not reflect the checked states of those checkboxes and radios, I never thought it would be the problem of the <code>clone()</code> function that's why when I created the sample codes, I did not clone it and so the actual problem failed to be demonstrated.</p>
  
  <p>The updated sample codes are here (with jQuery version changed to 1.3.2):</p>
  
  <p><a href="http://jsfiddle.net/e9j6j/4/" rel="nofollow noreferrer">http://jsfiddle.net/e9j6j/4/</a></p>
  
  <p>This may show the problem of the clone() function on IE8 (I don't have IE8 right now, I will test it when I am home, I will report later).</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have just did the test. It's really the problem of <code>clone()</code> function in jQuery 1.3.2 on IE8. It fails to copy the states of checkboxes and radios. After changing it to jQuery 1.5.1. It works perfectly.</p>