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. day4、Linux基础题目

    第一题 我想在/data/da 目录下面创建 一个 da.txt 文件 [root@ll ~]# cd /data/oldboyedu -bash: cd: /data/oldboyedu: No s ...

  2. poj 2299 Ultra-QuickSort(树状数组求逆序数+离散化)

    题目链接:http://poj.org/problem?id=2299 Description In this problem, you have to analyze a particular so ...

  3. 中国十大B2C电商站点开发语言调查

    中国B2C电商站点市场占有率排名例如以下 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I ...

  4. spring mvc获取绝对路径的几种方法

    1.首先如果是在一个controller方法中,则很简单,直接用下面语句. @RequestMapping("categoryHome") public ModelAndView ...

  5. 小强的Hadoop学习之路

    本人一直在做NET开发,接触这行有6年了吧.毕业也快四年了(6年是因为大学就开始在一家小公司做门户网站,哈哈哈),之前一直秉承着学要精,就一直一门心思的在做NET(也是懒吧).最近的工作一直都和大数据 ...

  6. 【python】字符串变量赋值时字符串可用单或双引号

    >>> name='萧峰' >>> print(name) 萧峰 >>> name="独孤求败" >>> p ...

  7. Python云端系统开发入门——框架基础

    Django框架基础 这是我学习北京理工大学嵩天老师的<Python云端系统开发入门>课程的笔记,在此我特别感谢老师的精彩讲解和对我的引导. 1.Django简介与安装 Django是一个 ...

  8. 迷宫问题 Maze 4X4 (sloved by backtrack)

    Description 给定一个N*N的迷宫中,(0,0)为起始点,(N-1,N-1)为目的地,求可通往目的地的多个解 思路 这道题其实就是简单的DFS,一路探索到底,没路就回溯到交叉口. #incl ...

  9. ABP PUT、DELETE请求错误405.0 - Method Not Allowed 因为使用了无效方法(HTTP 谓词) 引发客户端错误 No 'Access-Control-Allow-Origin' header is present on the requested resource

    先请检查是否是跨域配置问题,请参考博客:http://www.cnblogs.com/donaldtdz/p/7882225.html 一.问题描述 ABP angular前端部署后,查询,新增都没问 ...

  10. Java I/O---Reader & Writer(字符流)

    1.Reader & Writer 当我们初次看见Reader和Writer类时,可能会以为这是两个用来替代InputStream和OutputStreamt的类,但实际上并非如此. 尽管一些 ...