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

更新时间：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><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><script type="text/javascript">//<![CDATA[function getRadioValue(ctlName) {var ctls = document.getElementsByName(ctlName);var len = ctls.length;for (var i=0; i<len; i++) {if (ctls[i].checked) {return ctls[i].value;}}}function handleChangeDom() {alert('before append, you select radio value is "'+getRadioValue('rdo')+'"');var wrapper = document.getElementById('rdoWrapper');document.body.appendChild(wrapper);alert('after append, you select radio value is "'+getRadioValue('rdo')+'"');}//]]></script></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><div id="hd"><h1> fixed 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><script type="text/javascript">//<![CDATA[function getRadioValue(ctlName) {var ctls = document.getElementsByName(ctlName);var len = ctls.length;for (var i=0; i<len; i++) {if (ctls[i].checked) {return ctls[i].value;}}}function setRadioDefaultValue(ctlName) {var ctls = document.getElementsByName(ctlName);var len = ctls.length;for (var i=0; i<len; i++) {ctls[i].defaultChecked = ctls[i].checked;}}function handleChangeDom() {alert('before append, you select radio value is "'+getRadioValue('rdo')+'"');setRadioDefaultValue('rdo');var wrapper = document.getElementById('rdoWrapper');document.body.appendChild(wrapper);alert('after append, you select radio value is "'+getRadioValue('rdo')+'"');}//]]></script></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript 输入框内容格式验证代码
当鼠标焦点移至密码输入框时，利用js脚本自动验证用户名的格式正确与否
2010-02-02
javascript radio list的实现细节(多浏览器兼容)
非常不错的radio list的效果实现代码
2008-12-12
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼...
2006-12-12
js select 标签选定项的值获取代码
用js获取当前选定的select的值的函数
2009-03-03
定义select的边框颜色
如何定义select的边框颜色解决思路：学习了clip和margin属性的用法，利用它们的特点，很容易就得出答案。
2008-04-04
javascript写的一个表单动态输入提示的代码
javascript写的一个表单动态输入提示的代码...
2007-08-08
option挡住div解决方法
Div下拉菜单被Select挡住的解决办法
2008-11-11
js select常用操作控制代码
js select操作控制代码，需要的朋友可以参考下。
2010-03-03
用JavaScript限制textarea输入长度 (For: IE、Firefox ...)[
用JavaScript限制textarea输入长度 (For: IE、Firefox ...)[...
2006-12-12
js获取当前select 元素值的代码
js获取当前select 元素值的代码，需要的朋友可以参考下。
2010-04-04

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具