checkbox_checkbox选中_checkbox操作--复选框技巧
2017-01-01 18:34

        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")才能达到目的。这样看来还是通过对象的点操作比较方便。

VVpng.png

上图是截取的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表单中的元素赋值。

啊啊.png

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

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

啊啊的.png

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

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2555)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1