checkbox对齐-复选框图标

一般开发过程中,我们直接使用<input type="checkbox"/>这样出现的复选框,设计师一般都说不好看

而让我们按照设计稿的来

这个时候 我们会得到 2个图标

没有复选框的

和有复选框的

这个时候需要使用 jq来点击切换图片显示了

<i class="check">五险一金转移</i>

<script type="text/javascript">
  $(document).ready(function() {
    $(".check").click(function() {
           $(this).toggleClass("checkbox-select");
  });
     });
</script>

详情可见附件文件夹。

下载地址: http://files.cnblogs.com/files/leshao/checkbox%E5%AF%B9%E9%BD%90.rar

												

checkbox对齐-复选框图标的更多相关文章

  1. ionic-CSS:ionic checkbox(复选框)

    ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...

  2. 在Servlet端获取html页面选中的checkbox值,request获取页面checkbox(复选框)值

    html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...

  3. jquery处理checkbox(复选框)是否被选中

    现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能 ...

  4. CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  5. jquery如何判断checkbox(复选框)是否被选中(转)

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  6. jQuery实现checkbox(复选框)选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  7. checkbox设置复选框的只读效果不让用户勾选

    在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...

  8. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  9. [转]jquery如何判断checkbox(复选框)是否被选中,至少被选中一个

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

随机推荐

  1. vue.js事件,属性,以及交互

    这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...

  2. 让你的Javascript提升70%性能

    现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行.预处理.setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker.即使对于WebWorker ...

  3. MySQL系列:基于binlog的增量订阅与消费(一)

    在一些业务场景中,像在数据分析中我们有时候需要捕获数据变化(CDC):在数据审计中,我们也往往需要知道数据从这个点到另一个点的变化:同样在实时分析中,我们有时候需要看到某个值得实时变化等. 要解决以上 ...

  4. javascript变量:全局?还是局部?这个得注意

    在JS中.是没有块级作用域的 举两个个样例: if语句块:     if (true){ var name='Ling'; } alert(name); 输出:Ling for语句块; for(var ...

  5. 轻松上云,从容实施Office 365项目

    这个是我在MVP 社区活动的一节课程,讲述Office 365部署中一些大的挑战和解决的方法 视频URL 例如以下: http://edu.51cto.com/lesson/id-17440.html ...

  6. poj 2034 Anti-prime Sequences(dfs)

    //相邻的 2.3......d 之和都要不为素数 # include <algorithm> # include <stdio.h> using namespace std; ...

  7. java中websocket的应用

    在上一篇文章中,笔者简要介绍了websocket的应用场景及优点,戳这里 这篇文章主要来介绍一下在java项目中,特别是java web项目中websocket的应用. 场景:我做了一个商城系统,跟大 ...

  8. 一个Web前端自学者的自述

    想来想去还是写下这篇文章,先说明,我精通JAVA编程语言和web前端常见的技术,个人是做JAVA的多,但是更加喜欢前端.因为我从高一开始接触JAVA,家父是黑马的JAVA讲师,自己对编程很热爱,在大学 ...

  9. .NET 实现DES加密解密处理

    .NET 实现DES加密解密处理 using System; using System.Text; using System.Security.Cryptography; using System.I ...

  10. Photoshop 无法打开某些JPEG文件的成因

    最近想把QQ相册里的一些照片整理修复一下,所以下载了一些到本地,然后用PS CC 2018打开,结果PS告诉我"无法完成请求,因为程序错误".试了Win10系统自带的看图软件,能够 ...