IE bug when operating form controls in DOM_form effects

Bug description
When the DOM structure of the form radio/checkbox is manipulated as in the following example (or when their structure is directly affected) the selected checkbox/radio will automatically return to the default state, just like clicking the reset button .

<title>Rank's HTML document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta http-equiv="ImageToolbar" content="no"> <meta http-equiv="Creator.name" content="Rank, BlueDestiny, never-online"> <style type="text/css" title="default" media="screen"> /*<![CDATA[*/ body { font-size:80%; line-height:1.5; } body, button { font-family:arial; } button { padding:0 0.3em 0 0.3em; } h1, h3 { margin:0; padding:0; } h1 { font-size:2.3em; } h3 { font-size:1.3em; } form { display:inline-block; } div.link { padding:1em; } div.content { background:#ffc; padding:1em; border:1px solid #222; margin:1em 0 1em; } #rdoWrapper { } #hd { text-align:center; } /*]]>*/ </style> <div id="hd"> <h1> IE form control bug </h1> <div class="link">from: <a href="http://www.never-online.net/blog"><em>never-online weblog</em></a> </div> </div> <div id="rdoWrapper" class="content"> <h3> 1. Select radio to checked </h3> <form method="post"> <input type="radio" name="rdo" id="rdo-1" value="rdo-1" checked><label for="rdo-1">radio1</label> <input type="radio" name="rdo" id="rdo-2" value="rdo-2"><label for="rdo-2">radio2</label> <input type="radio" name="rdo" id="rdo-3" value="rdo-3"><label for="rdo-3">radio3</label> <input type="radio" name="rdo" id="rdo-4" value="rdo-4"><label for="rdo-4">radio4</label> </form> </div> <div class="content"> <h3> 2. Click button to change dom structure </h3> <p class="p"><button type="button" onclick="handleChangeDom()">test</button></p> </div>