YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » JavaScript » DOM » IE浏览器中JavaScript动态创建checkbox,如何让它默认选中

IE浏览器中JavaScript动态创建checkbox,如何让它默认选中

在开发一个手机短信通讯录的前端界面时,界面中使用了checkbox作为各项的选择控件,但是操作时出了点差子。由于逻辑需要,需要预先选中用户上次选中的那些项目。但是当我使用JavaScript DOM编程动态创建checkbox时,在IE系列浏览器中(IE6中),直接设置checkbox控件的checked=checked属性是无法让它默认选中。示例代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<meta http-equiv="content-language" content="en" />
	<title>设置Checkbox默认选中</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
</head>
<body>
<ul>
	<li id="cnt"></li>
</ul>
<script type="text/javascript">
(function(){
	var container = document.getElementById('cnt'),
	    chkbox = document.createElement('input');
	
	chkbox.type='checkbox';
	chkbox.checked = true;
	chkbox.value="13900000000";
	
	container.appendChild(chkbox);	
})();	
</script>	
</body>
</html>

演示地址:设置checkbox默认选中 1

唉,没有办法,查下资料吧。结果发现在IE6浏览器中,只有在文档中已有的checkbox才可以设置选中状态。那就是说,动态创建的checkbox,必选要先append到页面中,再设置它的选中状态。

好吧,我们就改改代码,先添加到页面,再设置选中吧。调整过后的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<meta http-equiv="content-language" content="en" />
	<title>设置Checkbox默认选中</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
</head>
<body>
<ul>
	<li id="cnt"></li>
</ul>
<script type="text/javascript">
(function(){
	var container = document.getElementById('cnt'),
	    chkbox = document.createElement('input');
	
	chkbox.type='checkbox';
	chkbox.value="13900000000";
        chkbox.style.display='none';
	
	container.appendChild(chkbox);
	chkbox.checked = true;	
        chkbox.style.display='block';
})();	
</script>	
</body>
</html>

演示地址:设置checkbox默认选中 2

现在好了,不过细心的朋友应该发现了点不同。就是我在把checkbox添加到页面之前,把它隐藏起来,当把它添加到页面,并设置了选中状态后才显示它。为什么要这么做呢?

其实我这么做主要是为了提高性能,减少浏览器reflow的次数。关于这个问题大家可以参考《如何提升JavaScript的运行速度(DOM篇)》的相关内容。或者查看Zakas的《高性能JavaScript》一书的相关章节。我这里的DEMO只有一个checkbox,而实际的程序,会有几十个甚至上百个,这样在性能上的提高就体现出来了。

好了,问题解决了,而且我还优化了一下JavaScript代码的性能,不错的结果。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:IE浏览器中JavaScript动态创建checkbox,如何让它默认选中

»

6 条评论

  • 另外如果用innerHTML的方式视乎能解决你说的在IE6中无法选中的情况

    • inerHTML的方式我还真没有怎么测试,因为我当时是先创建了DOM,然后想绑定事件。如果innerHTML,则需要将HTML代码插入到document中,才可以搜索节点,再绑定事件。理论上,我这么处理比innerHTML再次遍历CHECKBOX要快。不过我会试试innerHTML的,谢谢了!

  • 你是否觉得添加到页面中,然后再设置checked的,是否浏览器多了一次重绘?但是我觉得没有多一次重绘,这边设置checked并没有影响到其几何属性,结构布局,也没有获取其各种位置,宽度等样式属性。反而你先设置其隐藏,然后又展现的方式多了两次不必要的操作,这样两次属性的设置开销也是很大的,你可以亲测下。

    • 这个我还真得测试一下,当时只是为了实现选中,重绘倒是没有考虑那么多,我测试后会给出结果的,谢谢了!

      不过根据Zakas的研究,隐藏的元素是不会引起重绘的。因为CHECKBOX我一开就隐藏了,应该是只在显示的时候重绘页面,不会两次绘制的。

  • 很久前写的文章了,不过要兼容IE6还是要这么做啊!

    • 你误会我的意思了,我是觉得不隐藏元素,直接改变其checked属性也不会增加页面重绘的负担,毕竟没有改变其几何元素,或者读取其任何几何样式属性(如果有这些那确实重绘代价挺大的,是该先隐藏,而这里只是改变一个checked值,就没必要了,反而多加的两次属性设置也是有代价的)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)