图片代替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这些不可直接设置的样式 。
前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...
随机推荐
- UnityShader快速上手指南(四)
简介 由于其他项目中断了几天更新,继续~~ 这一篇主要是讲光照的(包含漫反射和高光以及多光源的处理) 还是先来看看具体效果(多光源后面单独展示) 有了基本的光照处理之后越来越有立体感了有不有 ╮(╯▽ ...
- 解决jQuery插件冲突
项目框架的JS库集成了jQuery,Layout页面(模板页面,类似ASP.NET的母版页)中引用了这些JS,后来使用图表插件(图表插件是基于jQuery的)的时候,项目框架中的JS和图表插件有冲突, ...
- SQL索引学习-索引结构
前一阵无意中和同事讨论过一个SQL相关的题(通过一个小问题来学习SQL关联查询),很惭愧一个非常简单的问题由于种种原因居然没有回答正确,数据库知识方面我算不上技术好,谈起SQL知识的学习我得益于200 ...
- 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)
这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...
- HTML5 Audio and JavaScript Control
IE8 以下无效 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=u ...
- NYOJ:题目529 flip
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=529 由于此题槽点太多,所以没忍住...吐槽Time: 看到这题通过率出奇的高然后愉快的进 ...
- 论元数据和API管理工具
公司里面的很多部门都在广泛的采用元数据管理,也采用了公司内部开发的元数据管理工具,有些部门的实施效果一直非常好,而有些部门的效果则差强人意.这个问题,其实和软件系统开发完成进入维护阶段后成本居高不下的 ...
- dbcp/c3p0连接池设置mysql会话变量
我们有几个计算风控值的定时任务,几乎每隔5秒会更新所有账户的当前总资产并以此通知风控,每隔一小时就产生一两个G的binlog,几十台服务器折腾..数据库是公用的,代码是通过工具自动生成的,直接修改流程 ...
- LinQ实战学习笔记(三) 序列,查询操作符,查询表达式,表达式树
序列 延迟查询执行 查询操作符 查询表达式 表达式树 (一) 序列 先上一段代码, 这段代码使用扩展方法实现下面的要求: 取进程列表,进行过滤(取大于10M的进程) 列表进行排序(按内存占用) 只保留 ...
- 帝吧出征FB:这李毅吧的“爆吧”文化是如何形成的
声明:本文不对爆吧行为及其涉及的事件进行是非判断,只探讨帝吧文化本身,欢迎拍砖.更正和补充. 一.“帝吧FB出征”事件梳理 继上次全网集体骂 “薯片”事件后,昨日(1月20日)晚7点,又发生了一次互联 ...