ie6下怪异的radio

最新推荐文章于 2020-03-12 12:11:58 发布

iteye_4865

最新推荐文章于 2020-03-12 12:11:58 发布

阅读量90

点赞数

分类专栏： lite-ext 文章标签： jQuery IE UI 脚本浏览器 ViewUI

lite-ext 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

首先一句话：查bug的过程是痛苦的，结果是兴奋的。

近来尝试了一下，jquery ui ，其中的 dialog 还算好用，但是仍然在ie6下被我发现了一个bug：

示例

解决方法：只能是先等窗体显示出来后再操作radio了。

抽象如下：

示例

<div id="dialog" title="模板选择" >	
	 <input type="radio" name="template" value="1" />
	 <input type="radio" name="template" value="2" id="testRadio" />
	 <input type="radio" name="template" value="3" /> 
</div>
<script>
$(function(){
	 $("#dialog input:radio").attr("checked", false);
   $("#test").click(function(){
    		$("#dialog input:radio[value=" + "2" + "]").attr("checked", true); 
    		//或者$("#testRadio").appendTo("body");
    		$("#dialog").appendTo("body");
     });
});
</script>

根本原因：

当脚本设置了某个radio为checked，再在dom树中移动它的位置，或者其祖先元素的位置(即示例中的：$("#dialog").appendTo("body");)，当前radio在ie6下的checked状态被清除了！而恰恰在 jquery ui dialog 中当设置modal：true，即遮罩时，会在dom树中移动窗体dom节点的位置（who knows why！或许是为了控制reflow的次数，先将窗体从dom树中删掉再进行dialog包装，再插入到dom树中，但是display也可以做到的啊），于是产生实示例的效果了。

ps: innerHTML问题

顺带分享一下radio的相关innerhtml操作，ie与其他浏览器的差异，不知道算不算bug，但是也要注意下

radio innerHTML of ie6