图片代替radio
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>用JS实现的radio图片选择按钮效果-脚本之家</title>
- <style>
- .lanrentuku img{border:1px solid #008800;}
- </style>
- </head>
- <body>
- <script>
- function myFun(sId) {
- var oImg = document.getElementsByTagName('img');
- for (var i = 0; i < oImg.length; i++) {
- if (oImg[i].id == sId) {
- oImg[i].previousSibling.previousSibling.checked = true;
- oImg[i].style.border = '2px solid #ff8800';
- } else {
- oImg[i].style.border = '0px';
- }
- }
- }
- </script>
- <div class="lanrentuku">
- <input type="radio" value= "lanrentuku" id= "111" name="aaa" style="display:none"> <img id="aa" src="http://files.jb51.net/upload/2010-1/20100119030617615.gif " onclick="myFun(this.id)">
- <input type="radio" value= "lanrentuku" id= "222" name="aaa" style="display:none"> <img id="bb" src="http://files.jb51.net/upload/2010-1/20100119030617308.gif" onclick="myFun(this.id)">
- <input type="radio" value= "lanrentuku" id= "333" name="aaa" style="display:none"> <img id="cc" src="http://files.jb51.net/upload/2010-1/20100119030617561.gif" onclick="myFun(this.id)">
- </div>
- </body>
- </html>
图片代替radio的更多相关文章
- flashbuilder mx组件 MenuBar
来源:http://www.cuplayer.com/player/PlayerCode/Flex/2013/0118661.html <fx:Script> <![CDATA[ i ...
- Diango之通过form表单向服务端发送数据
通过form表单向服务端发送数据 表单元素 表单:form></form>表单用于向服务器传输数据.另外一种向服务端传输数据的方式为ajax. form属性: action:提交表单 ...
- 网页页面NULL值对浏览器兼容性的影响
网页页面NULL值对浏览器兼容性的影响 近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...
- paip.提升用户体验--radio图片选择器 easyui 实现..
#paip.提升用户体验--radio图片选择器 easyui 实现.. =================================== ##原因... ------------------- ...
- 表单:checkbox、radio样式(用图片换掉默认样式)
checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...
- 给radio加自己的样式(图片)
$('.choice').click(function() { var display1 = $("#check").prop("checked"); cons ...
- 纯css用图片代替checkbox和radio,无js实现方法
html <ul id="is_offical_post_links"> <li> <label> <input type="c ...
- 解决在IE下LABEL中IMG图片无法选中RADIO的几个方法
转http://www.cnblogs.com/chenxianbin89/archive/2012/11/25/2787258.html . 方法三,THML代码控制: 在IMG中加一个属性,dis ...
- 前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...
随机推荐
- HTML5表单元素的学习
本文内容 认识表单 基本元素的使用 表单高级元素的使用 现学现卖--创建用户反馈表单 ★ 认识 ...
- C#调用NPOI组件读取excel表格数据转为datatable写入word表格中并向word中插入图片/文字/书签 获得书签列表
调用word的com组件将400条数据导入word表格中耗时10分钟简直不能忍受,使用NPOI组件耗时4秒钟.但是NPOI中替换书签内容的功能不知道是不支持还是没找到. 辅助类 Excel表格数据与D ...
- 详细讲解PHP中缓存技术的应用
PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站,在速度上有绝对的优势,想mssql转6万条数据php如需要40秒,asp不下2 ...
- ASP.NET Web API 路由
路由系统是请求消息进入ASP.NET Web API消息处理管道的第一道屏障,其根本目的是利用注册的路由表(RouteTable)对请求的URI进行解析以确定目标HttpController和Acti ...
- guacamole 0.9.9安装与配置
以下命令很多都需要管理权限,建议使用管理员账号执行,遇到问题可以留言. 1.首先需要安装guacamole所需要的依赖库 必需安装的库有:Cairo.libjpeg-turbo.libpng.OSSP ...
- [Architecture Pattern] Singleton Locator
[Architecture Pattern] Singleton Locator 目的 组件自己提供Service Locator模式,用来降低组件的耦合度. 情景 在开发系统时,底层的Infrast ...
- 【JWPlayer】官方JWPlayer去水印步骤
在前端播放视频,现在用html5的video标签已经是一个不错的选择,不过有时候还是需要用StrobeMediaPlayback.JWPlayer这一类的flash播放器,JWPlayer的免费版本带 ...
- 原型 prototype
原型 prototype js 的对象比较 由于 js 是解释执行的语言, 那么再代码中出现函数与对象如果重复执行, 会创建多个副本 在代码中重复执行的代码容易出现重复的对象 创建一个 Person ...
- 人人都应该学习Markdown
Markdown是一门新兴的标记语言,已经有12年历史了.随着它在全球范围内的流行,很多人已经听说.熟识或者开始使用了. 首先,Markdown既不是工具,也不是程序语言,而是一种十分轻量级的标记语言 ...
- Git的安装和使用记录
Git是目前世界上最先进的分布式版本控制系统(没有之一),只用过集中式版本控制工具的我,今天也要开始学习啦.廖雪峰的git教程我觉得很详细了,这里记录一下步骤以及我终于学会用Markdown了,真的是 ...