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元素模拟实现。