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

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. 【狼】openGL 光照的学习

    小狼学习原创,欢迎批评指正 http://www.cnblogs.com/zhanlang96/p/3859439.html 先上代码 #include "stdafx.h" #i ...

  2. Aix项目_shell_rsh_01

    rsh(remote shell) 功能说明:远端登入Shell. 语 法:rsh [-dn][-l <用户名称>][主机名称或IP地址][执行指令] 补充说明:rsh提供用户环境,也就是 ...

  3. 【leetcode】com/problems/surrounded-regions/

    dfs 栈溢出,bfs超时,用dfs非递归就不溢出了,前后写了1一个星期class node { int i; int j; public node(int i1,int j1) { i=i1; j= ...

  4. Java IO复习(一)

    package com.zyw.file; import java.io.*; /** * Created by zyw on 2016/3/10. */ public class IOTest { ...

  5. 【转】VS2013编译libjpeg库

    原文地址:http://blog.csdn.net/weixinhum/article/details/42718959 现在,很多图像处理工具和开源库都给出了图像解码的函数接口,然而有时这些接口并不 ...

  6. Centos 下安装MongoDB

    Centos 下安装MongoDB 一.安装方法 方法(一) 1  配置包管理系统 创建/etc/yum.repos.d/mongodb.repo 文件,当然我们使用的是64位系统,32位的情况不再考 ...

  7. Away3d 骨骼动画优化

    很多朋友说Away3D 的骨骼数限制在32根,确切的说应该是Stage3D 的限制.在 AGAL2.0之前 VC寄存器是128个,每个vc常量寄存器最大只能容纳4位,transform占用一个4*4的 ...

  8. [置顶] Android布局管理器 - 详细解析布局实现

    布局管理器都是以ViewGroup为基类派生出来的; 使用布局管理器可以适配不同手机屏幕的分辨率,尺寸大小; 布局管理器之间的继承关系 : 在上面的UML图中可以看出, 绝对布局 帧布局 网格布局 相 ...

  9. ※C++随笔※=>☆C++基础☆=>※№→C++中 #include<>与#include""

    #include<> 使用尖括号表示在包含文件目录中去查找(包含目录是由用户在设置环境时设置的),而不在源文件目录去查找: #include"" 使用双引号则表示首先在 ...

  10. Javascript 函数和模块定义

    匿名函数 // calculator.js(function(root) {  var calculator = {    sum: function(a, b) { return a + b; }  ...