IE在DOM操作有表单控件时的bug

2024-05-06 14:16:29

字体：大中小

来源：转载

供稿：网友

bug描述
当象下例中那样操作了表单radio/checkbox的DOM结构时（或者直接影响了他们的结构时）选中的checkbox/radio将会自动恢复到默认状态，有如点了reset按钮一样。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><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></head><body><h1> IE form control bug </h1>from: <em>never-online weblog</em><h3> 1. Select radio to checked </h3><h3> 2. Click button to change dom structure </h3><p class="p"><button type="button" onclick="handleChangeDom()">test</button></p></body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
解决方法
可以在操作DOM之前，用defaultChecked来设置checked的值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><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></head><body><h1> fixed IE form control bug </h1>from: <em>never-online weblog</em><h3> 1. Select radio to checked </h3><h3> 2. Click button to change dom structure </h3><p class="p"><button type="button" onclick="handleChangeDom()">test            </SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1045224.html'>javascript 动态参数判空操作</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1045226.html'>javascript iFrame研究</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流