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. node基础篇一:node介绍、node http、node event 课堂(持续)

    最近工作一直很忙,没时间更新,谅解,这次准备更新一次node教程,本课堂将持续更新,每周坚持更新一到两章,希望对大家有一些小帮助吧: 一.首先什么是node? 1/Node.js 是一个基于 Chro ...

  2. svn服务器的搭建与使用二

    转载出处 上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首 ...

  3. Tomcat (安装及web实现 基础)

     Tomcat服务器配置 安装:解压对应的版本就行 注意;不要把Tomcat放到有中文的和有空格的目录中 验证是否安装成功:进入安装盘的安装文件的bin目录下 执行startup bat 成功  80 ...

  4. Create-React-App创建antd-mobile开发环境(学习中的记录)

    (参考别人结合自己的整理得出,若有错误请大神指出) Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能. 详 ...

  5. Hello Docker

    Docker: Build, Ship, and Run Any App, Anywhere 在任何地方构建.交付和运行任何应用 1. 引言 最近简单的学习了下Docker,本文先简要梳理下Docke ...

  6. 后台程序处理(二) python threading - queue 模块使用

    由于协程没办法完成(一)中所说的任务模式 接下来就尝试一下使用线程和队列来实现一下这个功能 在实现之前,我们先明确一个问题--python的线程是伪并发的.同一时间只能有一个线程在运行.具体怎样的运作 ...

  7. 如何修改maven默认仓库(即repository)的路径

    如何修改maven默认仓库(即repository)的路径 1  在maven的安装目录下,修改Eclipse(或IntelliJ IDEA)的MAVEN的存储位置,点击Browser按钮,选择set ...

  8. 什么是JWT(JSON WEB TOKEN)

    转自于:http://www.jianshu.com/p/576dbf44b2ae 什么是JWT Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准( ...

  9. 《HelloGitHub》第 21 期

    公告 元旦快乐! <HelloGitHub>第 21 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编 ...

  10. 虚拟表dual。字符串函数UPPER,LOWER。&变量。INITCAP,LENGTH,SUBSTR

    &自定义变量的用法: