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. DDD峰会归来话DDD

    一场大戏落幕,首届DDD中国峰会如大会主题色一般的红.或许在12月9日这一天,全中国的DDD粉丝大约有一半都汇聚在了国家会议中心.听起来是幸,其实是不幸,因为DDD在中国的人群基数实在是太少了. 因为 ...

  2. 从零开始构建docker基础镜像

    段子 今年基本已经结束了,我问了很多朋友今年挣钱了没?大多朋友都有挣,而且挣得五花八门:有挣个屁的,有挣个锤子的,有挣个毛的,更有甚者挣个妹的,奢侈之极!最恐怖的是挣个鬼的!有的还可以,挣个球,下午我 ...

  3. python爬虫(六)_urllib2:handle处理器和自定义opener

    本文将介绍handler处理器和自定义opener,更多内容请参考:python学习指南 opener和handleer 我们之前一直使用的是urllib2.urlopen(url)这种形式来打开网页 ...

  4. 解决PL/SQL Developer 连接oracle 11g 64位中的问题

    1.错误1:Initialization error could not initialize 电脑上原本就装有oracle 11g 64位,但是PL/SQL却怎么也连接不上,报出" Ini ...

  5. xml基本语法(2)

    本节要点: 了解XML的文档声明 了解XML的元素.命名规则.属性.元素内容.处理指令等概念 1 XML文档声明 表示该文档是一个XML文档,以及遵循哪个XML版本的规范. 规范:<?xml 版 ...

  6. C#基础知识 简单说明泛型的优点

    有关泛型的优缺点在网上有很多篇文章,也足以说明问题,我就不去复制粘贴了(而且内容有些多),由于记性不太好,所以自己做个简单明了的总结. 泛型的优点主要有两个: "性能" " ...

  7. 前端笔记---塌陷top

    一.在设置盒子div的子元素的外边框margin-top,子元素属性不起作用,父元素下沉: <!DOCTYPE html> <html lang="en"> ...

  8. Java加密与解密笔记(二) 对称加密

    前面的仅仅是做了编码或者摘要,下面看看真正的加密技术. DES public class DESUtil { static final String ALGORITHM = "DES&quo ...

  9. Nginx优点

    1.高并发响应性能非常好,官方Nginx处理静态文件并发5w/s 2.反向代码性能非常强(可用于负载均衡) 3.内存和cpu占比率低(为Apache的1/5-1/10); 4.对后端服务有健康检查功能 ...

  10. MongoDB入门系列(二):Insert、Update、Delete、Drop

    概述 本章节介绍Insert.Update.Delete.Drop操作基本语法. 环境: Version:3.4 insert insert()基本语法如下: db.collection.insert ...