一般的input框比较简单，我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果

首先需要有个图片素材，当页面加载的时候是背景图片定位到左图，当我们点击图片的时候，背景图片定位到右图

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/jquery.js"></script>

        <style type="text/css">

        .check_box{

            height: 20px;

            width: 20px;

            display: block;

            background: url("images/shop-icon.png") no-repeat;

            background-size: 50px 100px;

        }

        /*属性选择器*/

        .check_box[checked]{

            background-position: -25px 0;

        }

        </style>

    </head>

    <body>

            <span class="check_box"></span>

        <script type="text/javascript">

            var checkBtn = document.getElementsByClassName('check_box');

            for(var j = 0 ; j < checkBtn.length; j++){

                checkBtn[j].onclick = function(){

                    var hasChecked = this.getAttribute('checked');

                    if(hasChecked !== null){

                        this.removeAttribute('checked');

                    }else{

                        this.setAttribute('checked',' ');

                    }

                }

            }

        </script>

    </body>

</html>

用js写出一个漂亮的单选框选中效果的更多相关文章

  1. JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。

    编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...

  2. 输入一个数字n 如果n为偶数则除以2，若为奇数则加1或者减1，直到n为1，求最少次数 写出一个函数

    题目: 输入一个数字n  如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数  写出一个函数 首先,这道题肯定可以用动态规划来解, n为整数时,n的解为 n/2 的解加1 n为奇数时 ...

  3. java————数组 简单写出一个管理系统

    数组的特点 1,  数组是一块连续的空间,下标描述空间的位置. 2,  下标从0开始,最大下标为数组长度—1.(*.length-1) 3,  数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...

  4. 如何写出一个让人很难发现的bug？

    程序员的日常三件事:写bug.改bug.背锅.连程序员都自我调侃道,为什么每天都在加班?因为我的眼里常含bug. 那么如何写出一个让(坑)人(王)很(之)难(王)发现的bug呢? - 1 -新手开发+ ...

  5. 浅谈如何写出一个让(坑)人(王)很(之)难(王)发现的bug

    该文章内容来自脚本之家,原文链接:https://www.jb51.net/news/598404.html 程序员的日常三件事:写bug.改bug.背锅.连程序员都自我调侃道,为什么每天都在加班?因 ...

  6. 请写出一个超链接，点击链接后可以向zhangsan@d-heaven.com发送电子邮件。

    请写出一个超链接,点击链接后可以向zhangsan@d-heaven.com发送电子邮件. <a href=”mailto: zhangsan@d-heaven.com”>发邮件</ ...

  7. 用vue.js写的一个瀑布流的组件

    用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402

  8. 2019-8-31-C#-如何写出一个不能被其他程序集继承的抽象类

    title author date CreateTime categories C# 如何写出一个不能被其他程序集继承的抽象类 lindexi 2019-08-31 16:55:58 +0800 20 ...

  9. C# 如何写出一个不能被其他程序集继承的抽象类

    我需要限定某个抽象类只能在我程序集类实现,而不支持其他程序集实现,也就是我需要一个不能被继承的抽象类 在 C# 里面有抽象类和接口,这两个都是期望被继承才能被使用,而抽象类是可以做到只能在自己程序集和 ...

随机推荐

  1. 了解一下mock

    1.mock简介: mock测试就是在测试过程中,对于某些不容易构成或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法,mock是在测试过程中,对于一些不容易构造/获取的对象,创建一个mo ...

  2. 一个hql 关键字member（非mysql）引起的 vo 数据 保存数据库错误

    2015-03-19 14:16:29,285 ERROR [Thread-3] (DAOHelper.java:312) - updateByEntityPK:com.agileeagle.dao. ...

  3. 008-进制-C语言笔记

    008-进制-C语言笔记 学习目标 1.[掌握]include预处理指令 2.[掌握]多文件开发 3.[了解]认识进制 4.[掌握]进制之间的互相转换 5.[掌握]原码,反码,补码 6.[掌握]位运算 ...

  4. 知识点二：HTTP超文本文件传输协议

    HTTP超文本传输协议概念: http1.1之前采用非持续链接服务器在建立连接上开销较大,http1.1之后默认采用持续连接,并有超时设置 http协议:超文本文件传输协议,用于传输文本文件,请求的方 ...

  5. 试验使用t检验

    官方解释 Excel中使用T.TEST函数 T.TEST(array1,array2,tails,type) Array1      必需.第一个数据集. Array2      必需.第二个数据集. ...

  6. 学习Salesforce | Platform Developer Ⅰ 平台初级开发认证考试指南及备考资源

    一.平台开发人员考试计划 Salesforce平台开发人员初级认证面向具有在Lightning平台上构建自定义应用程序的知识.技能和经验的个人. 该认证考核Lightning平台的基本编程能力,并会使 ...

  7. pandas basic cheatsheet

    "胖的要死"是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的工具. 有多大?这篇 ...

  8. CSS躬行记（7）——合成

    在图形编辑软件中,可以按特定地方式处理不同图层的合成,最新的CSS规范也引入了该功能,并提供了mix-blend-mode和background-blend-mode两个属性.混合模式(blendin ...

  9. 全网最全最细的appium自动化测试环境搭建教程以及appium工作原理

    一.前言 ​ 对于appium自动化测试环境的搭建我相信90%的自学者都是在痛苦中挣扎,在挣扎中放弃,在放弃后又重新开始,只有10%的人,人品比较好,能够很快并顺利的搭建成功.appium 自动化测试 ...

  10. 面试官：你对Redis缓存了解吗？面对这11道面试题你是否有很多问号？

    前言 关于Redis的知识,总结了一个脑图分享给大家 1.在项目中缓存是如何使用的?为什么要用缓存?缓存使用不当会造成什么后果? 面试官心理分析 这个问题,互联网公司必问,要是一个人连缓存都不太清楚, ...