一般的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写出一个漂亮的单选框选中效果的更多相关文章
-
JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。
编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...
-
输入一个数字n 如果n为偶数则除以2，若为奇数则加1或者减1，直到n为1，求最少次数 写出一个函数
题目: 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数 首先,这道题肯定可以用动态规划来解, n为整数时,n的解为 n/2 的解加1 n为奇数时 ...
-
java————数组 简单写出一个管理系统
数组的特点 1, 数组是一块连续的空间,下标描述空间的位置. 2, 下标从0开始,最大下标为数组长度—1.(*.length-1) 3, 数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...
-
如何写出一个让人很难发现的bug？
程序员的日常三件事:写bug.改bug.背锅.连程序员都自我调侃道,为什么每天都在加班?因为我的眼里常含bug. 那么如何写出一个让(坑)人(王)很(之)难(王)发现的bug呢? - 1 -新手开发+ ...
-
浅谈如何写出一个让(坑)人(王)很(之)难(王)发现的bug
该文章内容来自脚本之家,原文链接:https://www.jb51.net/news/598404.html 程序员的日常三件事:写bug.改bug.背锅.连程序员都自我调侃道,为什么每天都在加班?因 ...
-
请写出一个超链接，点击链接后可以向zhangsan@d-heaven.com发送电子邮件。
请写出一个超链接,点击链接后可以向zhangsan@d-heaven.com发送电子邮件. <a href=”mailto: zhangsan@d-heaven.com”>发邮件</ ...
-
用vue.js写的一个瀑布流的组件
用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402
-
2019-8-31-C#-如何写出一个不能被其他程序集继承的抽象类
title author date CreateTime categories C# 如何写出一个不能被其他程序集继承的抽象类 lindexi 2019-08-31 16:55:58 +0800 20 ...
-
C# 如何写出一个不能被其他程序集继承的抽象类
我需要限定某个抽象类只能在我程序集类实现,而不支持其他程序集实现,也就是我需要一个不能被继承的抽象类 在 C# 里面有抽象类和接口,这两个都是期望被继承才能被使用,而抽象类是可以做到只能在自己程序集和 ...
随机推荐
-
世界国家 的数据库sql
, '中国', 'CHINA'); , '阿尔巴尼亚', 'ALB'); , '阿尔及利亚', 'DZA'); , '阿富汗', 'AFG'); , '阿根廷', 'ARG'); , '阿拉伯联合酋长 ...
-
canvas API ，通俗的canvas基础知识（五）
前几期讲的都是路径图形的绘图,这节我们要讲的是如何在画布上操作图片,因为图形画不了漂亮妹子(画图高手忽略不计),想画美女怎么办?跟我来: 想要在画布中插入一张图片,我们需要的方法是这位大侠: draw ...
-
hdu 2057 A+B Again
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2057 题目分析:涉及到16进制内的加法,可以用%I64x直接来处理,要注意到16进制中负数是用补码来表 ...
-
.NET：脏读、不可重复读和幻读测试
目录 背景脏读原因重现和避免不可重复读原因重现和避免幻读原因重现和避免嵌套事务导致的死锁备注 背景返回目录 昨天才发现如果一条数据被A事务修改但是未提交,B事务如果采用“读已提交”或更严格的隔离级别读 ...
-
BFS(广度优先搜索)
简介 BFS的过程是首先访问起始结点v,接着访问顶点v的所有未被访问的邻接结点,然后对每个继续进行上述步骤,直到所有结点都被访问过为止,当然,在访问过程中,需要使用一个队列,然后类似二叉树的层次遍历来 ...
-
Team Queue （HDU:1387）
Queues and Priority Queues are data structures which are known to most computer scientists. The Team ...
-
Go基础系列：nil channel用法示例
Go channel系列: channel入门 为select设置超时时间 nil channel用法示例 双层channel用法示例 指定goroutine的执行顺序 当未为channel分配内存时 ...
-
Java IO 文件
在java应用程序中,文件是一种常用的数据源或者存储数据的媒介.所以这一小节将会对Java中文件的使用做一个简短的概述.这里只提供一些必要的知识点. 通过Java IO读文件 如果你需要在不同端之间读 ...
-
Oracle 导出空表的新方法(彻底解决)
背景 使用Exp命令在oracle 11g 以后不导出空表(rowcount=0),是最近在工作中遇到一个很坑的问题,甚至已经被坑了不止一次,所以这次痛定思痛,准备把这个问题彻底解决.之所以叫新方法, ...
-
关于ESXI能虚拟出多少个虚拟机和CPU的关系
当你的虚拟机报如下错误的时候: esxi5.0版本最高配置: https://www.vmware.com/content/dam/digitalmarketing/vmware/zh-cn/pdf/ ...