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

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. SDH,WDM, OTN, MSTP,Ethernet, PTN, IP RAN

    概要:对带宽的需求,加上IP化严重,光通信技术不断地进化.最早的技术就是SONET.SDH,后来的技术都是在此技术上不断地改进和发展,以太网技术是一种局域网技术. SDH带宽小,提高带宽出现了WDM波 ...

  2. Google的一些功能和软件

    本博文的主要内容有 .Google的一些功能和软件 Google的一些功能和软件 1.  iGoogle 2.  Google Earth 3.  Google Talk http://www.goo ...

  3. JVM分代垃圾回收策略的基础概念

    由于不同对象的生命周期不一样,因此在JVM的垃圾回收策略中有分代这一策略.本文介绍了分代策略的目标,如何分代,以及垃圾回收的触发因素. 文章总结了JVM垃圾回收策略为什么要分代,如何分代,以及垃圾回收 ...

  4. List<Map<String,String>>操作(遍历,比较)

    1.List<Map<String,String>>的遍历: Map<String,String> map = new HashMap<String, Str ...

  5. WCF服务发布到IIS时候,只能根据hostname访问,不能根据IP地址访问的解决办法

    本文转载:http://www.cnblogs.com/deerbox/archive/2013/05/13/3076248.html 环境: VS2010 sp1,.net framework 4. ...

  6. 1040. Longest Symmetric String (25)

    题目链接:http://www.patest.cn/contests/pat-a-practise/1040 题目: 1040. Longest Symmetric String (25) 时间限制 ...

  7. Ubuntu 14.04 没有system settings的解决方法

    在我的Dell Latitude 3330上, 新装的Ubuntu 14.04一切正常,就是没有system settings程序, 以下的命令能够解决: sudo apt-get install u ...

  8. Android核心基础(二)

    1.对应用进行单元测试 在实际开发中,开发android软件的过程需要不断地进行测试.而使用Junit测试框架,侧是正规Android开发的必用技术,在Junit中可以得到组件,可以模拟发送事件和检测 ...

  9. android 30 下拉列表框:ArrayAdapter和Spinner.

    package com.sxt.day05_04; import android.os.Bundle; import android.app.Activity; import android.cont ...

  10. Qt 学习之路 :信号槽

    信号槽是 Qt 框架引以为豪的机制之一.熟练使用和理解信号槽,能够设计出解耦的非常漂亮的程序,有利于增强我们的技术设计能力. 所谓信号槽,实际就是观察者模式.当某个事件发生之后,比如,按钮检测到自己被 ...