默认的复选框样式一般在项目中都很少用 ,看起来也丑丑的。这里提供一个优化样式后的复选框。原理就是隐藏掉默认样式,在用设计好的样式替代

html结构

<div>
<input type="checkbox" name=""/>
<label class="check-all">全选</label>
</div>

js调用

$("#checkbox1").checkbox({reqUnit:function() {
console.log("点击复选框执行的后台操作");
},reqAll:function(){
console.log("点击全选复选框执行的后台操作");
}
});

demo 演示

都是比较小的功能。代码还需要优化。先记录在这里。有时间在优化

有需要的话。完整demo下载地址checkBox.zip

自定义复选框 checkbox 样式的更多相关文章

  1. 复选框checkbox样式修改

    该方法只兼容IE9及以上 将checkbox和label关联起来, 将checkbox隐藏掉,通过点击label来点击checkbox,label的样式即可自定义. 通过checkbox:checke ...

  2. 基于CSS3自定义美化复选框Checkbox组合

    今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点.有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化check ...

  3. 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

  4. 安卓开发:UI组件-RadioButton和复选框CheckBox

    2.5RadioButton 为用户提供由两个及以上互斥的选项组成的选项集. 2.5.1精简代码 在按钮变多之后,多次重复书写点击事件有些繁琐,我们在这里创建一个事件OnClick,每次点击时调用该事 ...

  5. 纯CSS3来自定义单选框radio与复选框checkbox

    单选框(radio)自定义样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  6. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

  7. QTableView中嵌入复选框CheckBox 的四种方法总结

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

  8. python QQTableView中嵌入复选框CheckBox四种方法

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

  9. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

随机推荐

  1. 《Linear Algebra and Its Applications》-chaper3-行列式-克拉默法则

    计算线性方程组唯一解的克拉默法则:

  2. t

    http://www.cnblogs.com/courtier/p/4287177.html 360导航_新一代安全上网导航 http://www.cnblogs.com/zhenzi/p/42926 ...

  3. nyoj 95 众数问题【水】

    众数问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重 ...

  4. Android学习之 sildingmenu

    仿SlidingMenu Android抽屉菜单效果drawer menu - appdoll.com Android "多方向"抽屉 - 开源中国社区 自定义Android滑动式 ...

  5. Apache开启Gzip压缩设置(转)

    第一步: 查看一下/etc/httpd/conf/httpd.conf中下面两个模块是否开启: LoadModule deflate_module modules/mod_deflate.so Loa ...

  6. Service 如何知道caller

    重写Binder的onTransact方法 1   you need to do that in Binder#onTransact method, this is a good place for ...

  7. [转]Android NDK几点回调方式

    一.NDK中获取android设备ID的方式 Java代码如下(获取设备ANDROID_ID): final String androidId = Secure.getString(context.g ...

  8. iOS UI控件继承关系图

    闲来无事,把UI控件的继承关系图整理下来,供自己和大家使用.

  9. 理解JavaScript的定时器与回调机制

    定时器方法 JavaScript是单线程的.虽然HTML5已经开始支持异步js了. JavaScript的setTimeout与setInterval看起来就像已经是多线程的了.但实际上setTime ...

  10. angularJS function

    angular.bootstrap 启动Angular angular.element 相当于轻量的JQuery 使用方法: angular.element('#qq'); angular.eleme ...