谈点关于checkbox的事情
发布时间:2010-09-28 14:49:00
今天在开发一个手机短信通讯录的前端界面时,界面中使用了checkbox,来做为各项的选择控件,但是操作时,除了点差子。由于逻辑需要,需要预先选中用户上次选中的那些项目。但是当我使用javascript dom编程时,在IE系列浏览器中,直接在创建checkbox控件的时候无法让他默认选中。
情况是这样的,出于性能的考虑,我开始的做法是先创建一个文档碎片,然后讲所有的选择项循环加载到这个文档碎片中,当然这个时候我就设置了:
checkbox.checked = ture
然后再一次讲这包含大量选项的文档碎片加载到选项列表容器中,代码类似这样:
var optsList = document.getElementById('optsList');var optsDF = document.createDocumentFragment();var chkBox = [];for(var i =0; i < length; ++i){ chkBox[i] = Builder.Node('input',{ id: 'chkBox'+i, value: i, checked : (bChked) ? ture : false }); optsDF.appendChild(chkBox[i]); }optsList.appendChild(optDF);
让我简单的说明下,为什么我要先创建文档碎片,先把列表项添加到文本碎片中,然后一次加到类表项容器中,而不直接把列表加载到类表项容器中。这个是由于如果直接这么做,浏览器就给在你每次添加列表项是,重绘页面(当你使用FIREBUG调试时,这个过程被放大,页面会闪烁一次)。这么做效率比较低,也占资源。所以我采用先将全部要的列表添加到文档碎片中,然后再添加到目标的列表框容器中,虽然这么做还多添加了一次,但是由于往文档碎片添加节点,页面是不会重绘的,所以反而会比较块,效率更高。
唉,可不幸的是,IE系列浏览器(IE6~8),它的逻辑是,如果你不把checkbox添加到页面文档中,你是不能设置它是否被选中的(虽然这逻辑似乎有点合理)。但这个不是我想要的结果,大家可以尝试下这两段代码:
代码一:var option = document.createElement('input'); option.value = '1'; option.checked = true; option.type = 'checkbox'; document.body.appendChild(option);
代码二 var option = document.createElement('input'); option.type = 'checkbox'; option.value = '1';option.checked = true; document.body.appendChild(option);
唯一的区别是,在代码二中我是在将checkbox添加到文档以后,再设置的checked = ture,而这么做,在IE和其他浏览器总都得到了选项被选中的状态。
唉,没有办法,为了兼容性,我只有采取我开始不愿采取的做法,直接讲选择项添加到列表框容器中。顺便说一句,除了Javascript中表示"非"的值false,‘’,null,0,NaN,undefined,checked设置其余任何值,都标识选中,比如:option.checked = 'false'。
所以,如果你的开发中也要使用DOM编程来实现加载时选中checkbox,要兼容的话,也只能采取我这种方法,先加载控件,然后再设置选中状态。
猜你喜欢
- 爱如风过 问:js如何能知道浏览者计算机或者浏览器使用的语言是繁体还是简体?如题,我想用jS检测到浏览者使用的是繁体还是简体中文,以便设置页
- 了兑现我对大家的承诺,我们现在立即就将“借助数据库和ASP程序”编写出来的,可以同时适用于IIS和P
- 无论使用int还是varchar,对于Status的多选查询都是不易应对的。举例,常规思维下对CustomerStatus的Enum设置如下
- 如果遇到与文件许可有关的问题,可能数启动mysqld时UMASK环境变量设置得不正确。例如,当你创建表时,MySQL可能会发出下述错误消息:
- javascript 常见汉字转换成拼音,上下行排列,方便对比,速度快,你可以把代码复制到本地,作为一个不错的汉字转换拼音的工具!转换效果图
- 最近做了一次口碑网注册流程改造,简单说一下激活邮件的设计上的一些小心得:1、尽量不要用图片,尤其是别把激活链接做成一个点击按钮。2、尽量少的
- mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题。还好mysql数据库提供了一种主从备份的机制,其实就是把主数据库
- 产品使用者可分为三个类别,分别是:初级用户、中级用户、高级用户。这三个类别分别代表了用户使用产品的三个阶段,其中初级用户是占最大比例的,中级
- 本文使用css结合js技术给网页背景background 插入flash播放器播放音乐,想法很大胆,呵呵!刚刚乱试一翻搞出这个,有意思吗?请
- 首先说明下范围用Javascript来开发WEB页面的动画效果该思路同时考虑页面效率、SEO,如果数据大,也可以缓解后端压力。这个是程序设计
- 我们已经知道,null 没有任何的属性值,并且无法获取其实体(existence)值。所以 null.property 返回的是错误(err
- 那么,现在如果给出一个权限编号,要去检索出用后这个权限的用户集合,就会需要在逗号分隔的多个权限编号中去匹配给出的这个权限编号。如果使用lik
- 表单外观的美化很多时候,我们仅仅为了实现数据采集这个功能来使用表单,常看到的表单都是“千人一面”、毫无
- 如何获知用户的IP?<% Dim ValidLog ' 日志变量 Valid
- 分页,就是按照某种规则显示分组数据集,但是在SQL Server 中,分页并不是十分容易就能够实现。在过去,开发人员通常需要自己编写程序,使
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 10 - Using FX.TweenMooToo
- ASP日期和时间函数我们经常会用到,本文列出了12个常用的asp日期和时间函数的语法及用法以作备忘!1.Now Now() 取
- 很久没有发表文章了,最近一直在研究产品设计标准的问题,之前有发过一篇关于 Axure的教程 ,相信很多人已经学会如何使用,这次我给大家介绍一
- 原文:http://blog.rexsong.com/?p=746#comments加速的关键,不是降低重量,而是减少个数。如果重量在200
- 一、 网页设计中的对比原则一件网页设计作品由许多元素构成,它们的重要性各不相同,其中一些元素的重要性要高于其它元素。一些相互关联,而另一些则