css美化checkbox的样式
使用iCheck插件可以改变checkbox、radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的click事件,所以费了些时间写了一个单纯css可以控制样式的解决方法,以checkbox为例:
input[type="checkbox"]{ position: relative; width: 13px; height: 13px; background: #fff; border: 1px solid #dcdcdc; border-radius: 1px; -webkit-appearance: none; border-width: 0 \0; } input[type="checkbox"]:focus { outline: 0; border-color: #428bca; } input[type="checkbox"]:checked { background: #fff; border-color: #0099ff; } input[type="checkbox"]:checked::after { content: url(checkmark.png); display: block; position: absolute; top: -6px; left: -5px; }
通过改变checkmark.png来定义自己的样式
jquery判断checked的三种方法:
.attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'): //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");