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. 写个简单的chrome插件-京东商品历史价格查询

    说chrome插件编写的先关文章, 首推小茗的[干货]Chrome插件(扩展)开发全攻略. 有非常完善的理论,引用和demo代码. 但是还是建议看官方的 chrome extensions. chro ...

  2. test20181004 排列

    题意 分析 容斥公式的意义 选了原图中\(x(x \geq i)\)条边的方案,重复了\(\binom{x}{i}\)次. 有多加多减,所以就是那个式子. 具体而言,对选了x条原图中的边的方案,总共加 ...

  3. test20180922 扭动的树

    题意 分析 二叉查找树按照键值排序的本质是中序遍历,每次我们可以在当前区间中提取出一个根,然后划分为两个子区间做区间DP.记\(f(i,j,k)\)表示区间[i, j]建子树,子树根节点的父亲是第k个 ...

  4. JSON字符串-赋张最初接触后台从map转json的方法

    **************************************** json数组: *************************************************** ...

  5. Linux性能测试工具安装全集

    stress 下载地址:http://people.seas.harvard.edu/~apw/stress/ 一.stress工具安装:1.获取stress源码安装包(stress-1.0.4.ta ...

  6. osql执行数据库查询命令并保存到txt文件

    osql -Usa -P123 -d AppBox -Q "select * from Menus where sortindex > 1000" -o e:\xxx.txt ...

  7. react-router4.0的使用

    近来很忙,学了一波react,特来记一笔,分享下react-router的使用方式 第一步引入内部组件 import {Route,BrowserRouter as Router,Switch,Lin ...

  8. MySQL 瓶颈及应对措施

    注:内容摘抄自<PHP 核心技术与最佳实践>一书 MySQL 是存在瓶颈的. 当 MySQL 单表数据量达到千万级别以上时,无论如何对 MySQL 进行优化,查询如何简单,MySQL 的性 ...

  9. C# 日期格式化的中的(/)正斜杠的问题（与操作系统设置有关）

    Console.WriteLine(DateTime.Now.ToString("yyyy/MM/dd" )); //这行代码, 如果你在系统日期格式默认的情况下输出 2013/0 ...

  10. Google.ProtocolBuffers.dll 之.Net应用（一）

    原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ http://www.cnblogs.com/wu-jian/archive/2011/02/22/1961 ...