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

ttx9n · 发表于 2008-12-10 17:57:30

影响的范围: IE的所有版本在表单的radio/checkbox控件中，一旦他们的DOM结构被更改过就会出现这个bug。 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: <a href="http://www.never-online.net/blog"><em>never-online weblog</em></a>

<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>

<h3> 2. Click button to change dom structure </h3>
<p class="p"><button type="button" onclick="handleChangeDom()">test</button></p>

[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: <a href="http://www.never-online.net/blog"><em>never-online weblog</em></a>

<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>

<h3> 2. Click button to change dom structure </h3>
<p class="p"><button type="button" onclick="handleChangeDom()">test</button></p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

q215357618 · 发表于 2022-10-2 10:11:43

啪啪啪生怕PSP怕

qzdhcgs · 发表于 2022-12-3 08:33:35

逛逛看看瞧瞧

i3x3r3 · 发表于 2022-12-15 03:56:03

而非为吾问无为谓娃娃

bp5jgbcnt · 发表于 2022-12-31 21:24:42

撒旦撒旦撒擦擦擦擦

hd1tvqb3 · 发表于 2023-1-18 10:27:13

谢谢您的分享！

xf9hlg1 · 发表于 2023-5-4 18:19:49

了乐趣了去了去了去了去了

fzyzy · 发表于 2023-11-17 20:59:34

dfdsafdsfdsfdsf

雪龙Ui79 · 发表于 2024-3-17 23:34:40

为全额万千瓦

qwe520 · 发表于 2024-4-16 00:14:15

抽根烟，下来看看再说

账号		自动登录	找回密码
密码			立即注册

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

相关帖子