<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的更多相关文章

  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. Ext.NET 4.1 最新版本破解

    Ext.NET 4.1 最新版本破解 今天在将Ext.NET 4.1版本的程序发布到公网时居然要license(localhost和127.0.0.1不收费),而且一年$4999,突然间觉得这是什么鬼 ...

  2. C# 通过自定义特性 实现根据实体类自动创建数据库表

    .Net新手通常容易把属性(Property)跟特性(Attribute)搞混,其实这是两种不同的东西 属性指的类中封装的数据字段:而特性是对类.字段.方法和属性等元素标注的声明性信息 如下代码(Id ...

  3. Sql server脏读、更新丢失、不可重复读、幻象读问题及解决方案

    1.脏读:一个事务读到另外一个事务还没有提交的数据.解决方法:把事务隔离级别调整到READ COMMITTED,即SET TRAN ISOLATION LEVEL READ COMMITTED.这时我 ...

  4. js算法运算

    //js 加法计算 //调用:accAdd(arg1,arg2) //返回值:arg1加arg2的精确结果 function accAdd(arg1,arg2){ var r1,r2,m; try{r ...

  5. JMS学习（三）JMS 消息结构之属性及消息体详解

    一.前言 通过上一篇的学习我们知道了消息分为三个部分,即消息头,属性及消息体,并对消息头的十个属性进行了详细的介绍,本文再对消息属性及消息体进行详细的介绍. 二.属性介绍 消息属性的主要作用是可以对头 ...

  6. 机器学习实战 - 读书笔记(12) - 使用FP-growth算法来高效发现频繁项集

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第12章 - 使用FP-growth算法来高效发现频繁项集. 基本概念 FP-growt ...

  7. 类库LinqToExcel的介绍

            LinqToExcel是一个.net framework平台下开源项目,它主要实现了LINQ的语法查询Excel电子表格.类型之前的LINQToXXX如果你是LINQ语法糖爱好者那最适 ...

  8. linq 动态组合条件

    http://www.albahari.com/nutshell/predicatebuilder.aspx Dynamically Composing Expression Predicates S ...

  9. 第一个WCF的程序

    第一个WCF的程序,按照书上的基本已经完成,就是创建配置文件那里卡住了,因为书上写的不太全,明天再进行深入调试,输入http://127.0.0.1:3721/calculatorservice/me ...

  10. [leetcode] Reverse Bits

    Reverse Bits Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (re ...