checkbox、radio样式（用图片换掉默认样式）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function(){

    //checkbox radio 事件委派

    $(document).on('click', 'input', function(e) {

        var $_this = $(e.target);

        if($_this.is(':checkbox')){

            if ($_this.is(":checked") && $_this.parent(document).is('.checkbox')) {

                $_this.parent(".checkbox").addClass("checked");

            } else {

                $_this.parent(".checkbox").removeClass("checked");

            }

        }

        //radio

        if($_this.is(':radio') && $_this.parent(document).is('.checkbox')){

            $(".checkbox input[name=" + $_this.attr("name") + "]").each(function(index, element) {

                if ($(element).is(":checked")) {

                    $(element).parent(".checkbox").addClass("checked");

                } else {

                    $(element).parent(".checkbox").removeClass("checked");

                }

            });

        }

    });

});

</script>

<style type="text/css">

input[type="radio"] { vertical-align: text-bottom; }

input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline;}

.checkbox {

    display: inline-block;

    width: 15px;

    height: 15px;

    position: relative;

    background-color: #FFF;

    vertical-align: middle;

    overflow: hidden;

    cursor:pointer;

    background: url(img/icon.png) no-repeat;

    background-position:0 -80px;

}

.checkbox input {

    font-size: 50px;

    padding: 0;

    float: left;

    width: 100px;

    height: 100px;

    display: block;

    cursor: pointer;

    opacity: 0;

    filter: alpha(opacity=0);

}

.checkbox.checked {background-position:0 -40px;}

</style>

</head>

<body>

<form>

<span class="checkbox"><input name="food" type="radio" value="0" /></span>米饭

<span class="checkbox"><input name="food" type="radio" value="10" /></span>馒头

<span class="checkbox checked"><input name="food" type="radio" value="40" checked="checked"/></span>面包

<hr>

<span class="checkbox"><input name="fruit" type="checkbox" value="苹果" /></span>苹果

<span class="checkbox checked"><input name="fruit" type="checkbox" value="橘子" checked="checked"/></span>橘子

<span class="checkbox checked"><input name="fruit" type="checkbox" value="葡萄" checked="checked"/></span>葡萄

<span class="checkbox"><input name="fruit" type="checkbox" value="木瓜" /></span>木瓜

<span class="checkbox"><input name="fruit" type="checkbox" value="菠萝" /></span>菠萝

</form>

</body>

</html>

表单：checkbox、radio样式（用图片换掉默认样式）的更多相关文章

  1. form表单，css简介，css选择器，css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  2. antd做form表单的组件共用，利用mapPropsToFields填写默认值

    做单页应用,不管是用Vue还是React,或者其他,有一个重要的原则,就是:组件重用. 既然组件可以重用,那么当添加一个信息,和修改该信息的布局必然是一致的,这时候,最好的方法自然是利用同一个组件,在 ...

  3. css重设样式_清除浏览器的默认样式

    由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一. 收集的默认样式的链接地址: 1.eric-meyer-reset ...

  4. 作业注释 CSS表单1 输入框前有图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 2020最新Servlet+form表单实现文件上传(图片)

    servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...

  6. 表单Checkbox全选反选全不选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 实现表单checkbox获取已选择的值js代码

    <input type="checkbox" name="cb" value="1" />aa <input type=& ...

  8. JavaScript - 表单提交前预览图片

    其实这东西网上到处都是,但并不完整. 正好我也遇到了这个问题,不仅仅是预览,还需要得到图片的属性. 于是东凑西凑整理出一个完整的版本,并根据个人的理解加上了一点点说明. 首先做一些准备工作,HTML方 ...

  9. js实现表单checkbox的单选，全选

    全选&单选 //<input type="checkbox" name="" class="quan" value=" ...

随机推荐

  1. poj-1015(状态转移的方向（01背包）和结果的输出）

    #include <iostream> #include <algorithm> #include <cstring> #include <vector> ...

  2. HDU 4548：美素数

    Problem Description 小明对数的研究比较热爱,一谈到数,脑子里就涌现出好多数的问题,今天,小明想考考你对素数的认识. 问题是这样的:一个十进制数,如果是素数,而且它的各位数字和也是素 ...

  3. stenciljs 学习八 组件测试

    测试对于框架来说比较重要,对于web 组件的测试同样很重要,类似的jest 很方便,stenciljs也是基于jest 开发的 包含两个核心api render(), flush() 测试配置 pac ...

  4. NOSQL之MEMCACHE

    Memcached是一个自由开源的,高性能,分布式内存对象缓存系统.Memcached是一个自由开源的,高性能,分布式内存对象缓存系统.Memcached是一种基于内存的key-value存储,用来存 ...

  5. RabbitMQ负载均衡方案之LVS

    负载均衡的方案有很多,适合RabbitMQ使用的处理HAProxy之外还有LVS.LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件 ...

  6. Java JNDI 学习

    一.概念: 1.JNDI(JavaNaming and Directory Interface,Java命名和目录接口)是SUN公司提供的一种标准的Java命名系统接口,JNDI提供统一的客户端API ...

  7. task optimization之superglue分析

    开启logging (例子F:\wamp\www\git_repos\GitHub\GeneralUtility\superglue-master\examples\src\logging.cpp) ...

  8. Angular 4 管道

    一.date管道 1.html 2. 控制器中的定义brithday 3.效果图 如果时间格式 为: 我的生日是{{birthday | date:'yyyy-MM-dd HH:mm:ss'}} 则效 ...

  9. 大快DKH大数据智能分析平台监控参数说明

    2018年国内大数据公司50强榜单排名已经公布了出来,大快以黑马之姿闯入50强,并摘得多项桂冠.Hanlp自然语言处理技术也荣膺了“2018中国数据星技术”奖.对这份榜单感兴趣的可以找一下看看.本篇承 ...

  10. [转]Oracle中trace的几种

    Oracle中trace的几种 标签: 杂谈   我们在Oracle中在做troubleshooting的时候,经常要去做跟踪来查错,那今天就介绍几种trace的方法. 在这之前,我先说说10046事 ...