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. ubuntu mongodb backup/restore (备份和恢复)

    备份(导出) 1.导出单个collection-.json格式 mongoexport --host:127.0.0.1 --port:27017 --db test --collection tes ...

  2. UVA 10815：Andy's First Dictionary（STL）

    题意:给出一段英文,里面包含一些单词,空格和标点,单词不区分大小写,默认都为小写.按照字典序输出这些单词(这些单词不能有重复,字母全部变成小写) stringstream:包含在头文件#include ...

  3. 大家一起做训练 第一场 B Tournament

    题目来源:CodeForce #27 B 有n个人比赛,两两之间都有一场比赛,一共 n * (n - 1) / 2 场比赛.每场比赛的记录方式是 a b,表示在a和b的比赛中,a胜出,b失败. 经过研 ...

  4. hdu1301 Jungle Roads 最小生成树

    The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid money was s ...

  5. hdu1097

    hdu1097 求a^b的末位数 打表O(1) import java.util.*; public class Main { static int [][]a = new int[15][15]; ...

  6. 枚举大小为k的子集

    这种位操作不大可能分析出来,先看代码再分析. 代码 使用条件:\(k>0\) void solve(int n,int k) { for(int comb = (1 << k) - ...

  7. GridView实现数据编辑和删除

    <asp:GridView ID="gv_Emplogin" runat="server" AutoGenerateColumns="False ...

  8. hdu - 1823 - Luck and Love（线段树）

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/SCNU_Jiechao/article/details/24406391 题意:Wiskey招女友, ...

  9. Spring 框架中 ModelAndView、Model、ModelMap 的区别

    Model Model 是一个接口, 其实现类为ExtendedModelMap,继承了ModelMap类. public class ExtendedModelMap extends ModelMa ...

  10. Java Web Service 学习笔记

    一.服务端 1. 创建Java工程 2. 创建接口HostipalServiceInterface package ws_server; import javax.jws.WebMethod; imp ...