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

所属分类：网络编程 / JavaScript 阅读数： 1567

收藏 0赞 0分享

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" /></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></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" /></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></body></html>

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

更多精彩内容其他人还在看

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

纯javascript判断查询日期是否为有效日期

jquery实现的蓝色二级导航条效果代码

ajax如何实现页面局部跳转与结果返回

jQuery实现的类似淘宝网站搜索框样式代码分享

js实现的黑背景灰色二级导航菜单效果代码

jQuery仿360导航页图标拖动排序效果代码分享

javascript中SetInterval与setTimeout的定时器用法

jquery带下拉菜单和焦点图代码分享

jQuery实现的背景动态变化导航菜单效果

jquery+CSS实现的水平布局多级网页菜单效果

网络赚钱

站长故事