谈点关于checkbox的事情

今天在开发一个手机短信通讯录的前端界面时，界面中使用了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，要兼容的话，也只能采取我这种方法，先加载控件，然后再设置选中状态。