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. StyleCop 是什么，可以帮助团队带来什么价值？

    StyleCop 本质上是一个 C# 源代码规则分析器,可以帮助团队成员强制执行一组代码样式和一致性规则. 本文将简述 StyleCop 以及它能为团队带来的价值. 本文内容 StyleCop 是什么 ...

  2. 多边形面积问题（hdoj2036）

    杭电oj2036http://acm.hdu.edu.cn/showproblem.php?pid=2036 计算几何,求多边形的面积 只要记住这个公式: 如果逆时针给出点坐标,值为正, 如果顺时针给 ...

  3. elasticsearch问题解决之分片副本UNASSIGNED

    在上一篇文章中,我记录了在windows下同一台机器上搭建es集群的步骤,第二天在向集群中创建索引的时候,出现了分片副本未分配的情况(UNASSIGNED). 虽然并不影响数据的插入和查询,但是有问题 ...

  4. test20180919 递归问题

    题意 定义 \[ f(n)=\left\{ \begin{array}{} 1 & n=1\\ f(n-f(f(n-1)))+1 & n>1 \end{array} \right ...

  5. ES6必知必会 （四）—— Symbol、Set和Map

    Symbol 1.Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值.它是 JavaScript 语言的第七种数据类型,前六种分别是:undefined.null.布尔值(Bool ...

  6. 【转】解决Win7字体模糊不清晰的最佳办法

    原文网址:http://blog.sina.com.cn/s/blog_3d5f68cd0100ldtp.html 相信初次用win7的朋友,都会遇到字体不清晰的问题,有很多人因为这个问题而放弃使用w ...

  7. JS 响应式布局

    1.media 效果为屏幕宽度变化时,背景颜色也变化 <!DOCTYPE html> <html lang="en"> <head> <m ...

  8. [C++ Primer] : 第14章: 重载运算符与类型转换

    基本概念 重载运算符是具有特殊名字的函数: 它们的名字由关键字operator和其后要定义的运算符号共同组成. 重载运算符函数的参数数量与该运算符作用的运算对象数量一样多. 对于二元运算符来说, 左侧 ...

  9. jquery select radio

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为S ...

  10. BASIC-12_蓝桥杯_十六进制转八进制

    总结: 1.使用库函数可有效节省空间,但时间花费较多; 2.由于本题的输入数据较大,又限制时间,故要注意利用空间换时间; 3.使用顺序结构换取最小运行时间; 示例代码: #include <st ...