checkbox复选框在页面中是很常用的，我们平时操作它大部分是通过jquery来实现的，今天我们通过原生js操作，并且探讨checkbox的一些特性。

        首先我们在页面中定义一个checkbox。

<input type='checkbox' id='ck'/>

 之后获取checkbox的默认选中状态和选中状态

var ck=document.getElementById("ck");
//获取复选框的默认选中状态。
var defaultck=ck.defaultChecked;
//修改复选框的选中状态。
ck.checked=true;//or flase;
ck.checked="checked";
//传递除数字0和空字符串外的任意字符都是选中状态。
ck.checked="123wd";

//获取复选框的选中状态。
var isck=ck.checked;

对于checkbox的操作很简单，通过属性操作就可以完成我们想要的效果。通过上面的checked赋值为字符串，原来chekced可以设置为除整型0和空字符串外的任意字符串，而如果通过setAttribute("checked","");第二个参数可以是任何东西，即时你写0，false，一样是选中状态。要想通过这种方式设置为不选中，只能用removeAttribute("checked")才能达到目的。这样看来还是通过对象的点操作比较方便。

上图是截取的w3c的一张checkbox属性，可以看到它可用性的属性只有disabled，并没有input text的readonly属性，与它类似的select，radio都是只有disabled属性而没有readonly属性，以后再也不要问为什么我给它们设置了readonly属性，可它们还是可以编辑的这种问题了，DOM标准没有提过它们支持readonly，浏览器也没有自作主张让他们支持readonly。当给checkbox，select，radio设置了disabled属性后，在form表单提交时，他们是不往后台传值的。

 下面我们举一个设置权限的栗子，来说一下给checkbox组赋值的技巧

<input type='checkbox'  value='add' disabled name='priority'/>添加<br/>
<input type='checkbox'  value='change' name='priority'/>修改<br/>
<input type='checkbox'  value='search' name='priority'/>查询<br/>
<input type='checkbox'  value='delete' readonly name='priority'/>删除<br/>
<input type='checkbox'  value='up' name='priority'/>上传<br/>
<input type='checkbox'  value='down' name='priority'/>下载<br/>
<input type='checkbox'  value='admin' name='priority'/>管理<br/>

现在我们设置了这么一组checkbox，他们的那么都是相同的，我们通过ajax从后台获得了权限的json格式。

var json={
	add:true,
	change:false,
	search:false,
//delete是关键字，需要加引号，否则IE8-会报错
	"delete":true,
	up:true,
	down:false,
	admin:false
	};

我们要根据json对象的数据来给checkbox赋值，这里的关键就是要让对应的checkbox的value值（如果value不能改变，你也可以设置对应的自定义属性）和json对象的属性名称一一相对。

//此方法获取元素浏览器都支持
var elms=document.getElementsByName("priority");
for(var i=0;i<elms.length;i++){
   elms[i].checked=json[elms[i].value];
}

之后我们可以通过上面的for循环，将checkebox赋值为从json数据中去其value属性得到的值。这样是不是很方便，不用一个个checkbox来赋值，写一长列没有意义的重复代码。这种赋值方式不只可以用在checkbox组中，在整个form表单中，只有input元素的特定属性和数据的属性名称相呼应，我们就可以通过这种方法方便的给form表单中的元素赋值。

上图是我用chrome提交数据时checkbox组的截图，checkbox在提交数据时，选中的会向后台提交，没有选中的则不会向后台提交。

checkbox跟select一样属于浏览器中的控件，所谓控件就是对样式支持的差或者不支持，checkbox的边框，padding，背景色设置在IE10-下起作用，在其他浏览器中不起作用。

IE中的边框背景色的效果也不是我们所想要的，而实际中间有对勾的那个小方框才是控件，IE10-只是实现方式不同，在checkbox控件外层包围了一层元素，我们所设置的样式其实是跑到外层的元素上了，checkbox控件依然没有受样式的控制。所以对于checkbox对象我们要么忍痛用浏览器默认的样式，要么就自己用dom元素模拟实现。