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. $.each()与$(selector).each()

    $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可 ...

  2. (精)字符串，map -> json对象->map(初学者必读)

    import java.util.LinkedList; import java.util.*; import java.util.ListIterator; import net.sf.json.J ...

  3. MySQL--增加或修改列注释

    ##=============================================## ## 在创建表的时候为字段添加注释 ## CREATE TABLE TB003 ( ID INT P ...

  4. memcached自启动

    # # Source function library. . /etc/rc.d/init.d/functions . /etc/sysconfig/network #[ ${NETWORKING} ...

  5. oracle之 11.2.0.4 bbed安装

    一. bbed安装: 1.ORACLE 11G下安装BBED,需要从ORACLE 10G中复制三个包 sbbdpt.o .ssbbded.o 并将两个文件移到$ORACLE_HOME/rdbms/li ...

  6. 阿里巴巴Java开发手册-命名规约

    1. [强制] 代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束.反例: _name / __name / $Object / name_ / name$ / Object$2. ...

  7. Zigbee 的 mesh功能设置

    1. 在编译选项中加入ZIGBEEPRO 最大的节点深度为20,网络模式为mesh网络 如果不配置,则为HOME_CONTROLS,支持5级路由深度,每个路由器最多可连接20个节点(最多包括6个路由器 ...

  8. Openwrt编译时修改默认IP的方法

    在~/openwrt/barrier_breaker/package/base-files/files/lib/functions/ uci-defaults.sh 第178行修改IP地址

  9. 一个多maven项目聚合的实例

    本文转载自:http://my.oschina.net/xuqiang/blog/99854 本文介绍一个多maven项目的实例demo,展示了聚合.继承.工程依赖.单元测试.多war聚合.cargo ...

  10. 小峰mybatis（5）mybatis使用注解配置sql映射器--动态sql

    一.使用注解配置映射器 动态sql: 用的并不是很多,了解下: Student.java 实体bean: package com.cy.model; public class Student{ pri ...