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

html结构

  1. <div>
  2. <input type="checkbox" name=""/>
  3. <label class="check-all">全选</label>
  4. </div>

js调用

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

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. HDOJ/HDU 2549 壮志难酬(取小数点后几位~)

    Problem Description 话说MCA山上各路豪杰均出山抗敌,去年曾在江湖威名显赫的,江湖人称<万军中取上将首级舍我其谁>的甘露也不甘示弱,"天将降大任于斯人也,必先 ...

  2. JavaScript高级程序设计12.pdf

    第六章 面向对象的程序设计 ECMA中有两种属性:数据属性和访问器属性 数据属性的特性 [[Configurable]] 表示是否通过delete删除属性,是否重新定义属性,是否能把属性修改为访问器属 ...

  3. macbook pro install ubuntu

    https://help.ubuntu.com/community/MacBookPro Determine your hardware revision To determine which ver ...

  4. C# 调试

    1.监视窗口

  5. 353. Design Snake Game

    贪食蛇. GAME OVER有2种情况,1是咬到自己,2是出界. 1)用QUEUE来保留占据的格子,每走一格就添加1个,然后POll()最后一个. 做一个一样的SET来check要走的格子是不是已经在 ...

  6. java的任务监听器监听任务

    Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务. 使用这种方式可以让你的程序按照某一个频度执行,但不能在指定时间运行.一般用的较少 监听 ...

  7. 如何将位图格式图片文件(.bmp)生成geotiff格式图片?

    一.位图格式信息 位图BITMAPINFOHEADER 与BITMAPFILEHEADER: 先来看BITMAPINFOHEADER,只写几个主要的 biSize包含的是这个结构体的大小(包括颜色表) ...

  8. 在命令行cmd 下,输入dxdiag 查看关于电脑许多硬件的详细信息

    输入命令就可以查看本机的很多硬件的详细信息: 在命令行cmd 下,输入dxdiag  查看关于电脑许多硬件的详细信息

  9. Notepad++中的复活节彩蛋(easter egg)

    Notepad++是windows下的一个强大的文本编辑器; 它免费,开源, 比windows自带的记事本强大百倍; 我自己的感觉: 1.打开超大的文本文件,比方100M大小的文本格式的数据,记事本会 ...

  10. DELPHI TreeView 文件目录树和 设置节点图标 完整

        DELPHI TreeView 文件目录树和 设置节点图标   下载地址 http://download.csdn.net/detail/teststudio/6448293     需要制作 ...