1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>用JS实现的radio图片选择按钮效果-脚本之家</title>
  5. <style>
  6. .lanrentuku img{border:1px solid #008800;}
  7. </style>
  8. </head> 
  9.  
  10. <body>
  11. <script>
  12. function myFun(sId) {
  13.     var oImg = document.getElementsByTagName('img'); 
  14.  
  15.     for (var i = 0; i < oImg.length; i++) {
  16.     if (oImg[i].id == sId) {
  17.                oImg[i].previousSibling.previousSibling.checked = true;
  18.             oImg[i].style.border = '2px solid #ff8800';
  19.         } else {
  20.             oImg[i].style.border = '0px'; 
  21.  
  22.         }
  23.     }
  24. }
  25. </script>
  26. <div class="lanrentuku">
  27. <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)">
  28. <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)">
  29. <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)">
  30. </div> 
  31.  
  32. </body>
  33. </html>

图片代替radio的更多相关文章

  1. flashbuilder mx组件 MenuBar

    来源:http://www.cuplayer.com/player/PlayerCode/Flex/2013/0118661.html <fx:Script> <![CDATA[ i ...

  2. Diango之通过form表单向服务端发送数据

    通过form表单向服务端发送数据 表单元素 表单:form></form>表单用于向服务器传输数据.另外一种向服务端传输数据的方式为ajax. form属性: action:提交表单 ...

  3. 网页页面NULL值对浏览器兼容性的影响

    网页页面NULL值对浏览器兼容性的影响       近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...

  4. paip.提升用户体验--radio图片选择器 easyui 实现..

    #paip.提升用户体验--radio图片选择器 easyui 实现.. =================================== ##原因... ------------------- ...

  5. 表单：checkbox、radio样式（用图片换掉默认样式）

    checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...

  6. 给radio加自己的样式（图片）

    $('.choice').click(function() { var display1 = $("#check").prop("checked"); cons ...

  7. 纯css用图片代替checkbox和radio,无js实现方法

    html <ul id="is_offical_post_links"> <li> <label> <input type="c ...

  8. 解决在IE下LABEL中IMG图片无法选中RADIO的几个方法

    转http://www.cnblogs.com/chenxianbin89/archive/2012/11/25/2787258.html . 方法三,THML代码控制: 在IMG中加一个属性,dis ...

  9. 前端开发：css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

    前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...

随机推荐

  1. HTML5表单元素的学习

    本文内容              认识表单              基本元素的使用              表单高级元素的使用              现学现卖--创建用户反馈表单 ★  认识 ...

  2. C#调用NPOI组件读取excel表格数据转为datatable写入word表格中并向word中插入图片/文字/书签 获得书签列表

    调用word的com组件将400条数据导入word表格中耗时10分钟简直不能忍受,使用NPOI组件耗时4秒钟.但是NPOI中替换书签内容的功能不知道是不支持还是没找到. 辅助类 Excel表格数据与D ...

  3. 详细讲解PHP中缓存技术的应用

    PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站,在速度上有绝对的优势,想mssql转6万条数据php如需要40秒,asp不下2 ...

  4. ASP.NET Web API 路由

    路由系统是请求消息进入ASP.NET Web API消息处理管道的第一道屏障,其根本目的是利用注册的路由表(RouteTable)对请求的URI进行解析以确定目标HttpController和Acti ...

  5. guacamole 0.9.9安装与配置

    以下命令很多都需要管理权限,建议使用管理员账号执行,遇到问题可以留言. 1.首先需要安装guacamole所需要的依赖库 必需安装的库有:Cairo.libjpeg-turbo.libpng.OSSP ...

  6. [Architecture Pattern] Singleton Locator

    [Architecture Pattern] Singleton Locator 目的 组件自己提供Service Locator模式,用来降低组件的耦合度. 情景 在开发系统时,底层的Infrast ...

  7. 【JWPlayer】官方JWPlayer去水印步骤

    在前端播放视频,现在用html5的video标签已经是一个不错的选择,不过有时候还是需要用StrobeMediaPlayback.JWPlayer这一类的flash播放器,JWPlayer的免费版本带 ...

  8. 原型 prototype

    原型 prototype js 的对象比较 由于 js 是解释执行的语言, 那么再代码中出现函数与对象如果重复执行, 会创建多个副本 在代码中重复执行的代码容易出现重复的对象 创建一个 Person ...

  9. 人人都应该学习Markdown

    Markdown是一门新兴的标记语言,已经有12年历史了.随着它在全球范围内的流行,很多人已经听说.熟识或者开始使用了. 首先,Markdown既不是工具,也不是程序语言,而是一种十分轻量级的标记语言 ...

  10. Git的安装和使用记录

    Git是目前世界上最先进的分布式版本控制系统(没有之一),只用过集中式版本控制工具的我,今天也要开始学习啦.廖雪峰的git教程我觉得很详细了,这里记录一下步骤以及我终于学会用Markdown了,真的是 ...