<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. ASP.NET MVC的路由

    好久没写博文了,感觉最近好像少了点动力.唉!这回就看看这个MVC的路由. 说这个路由机制其实不是MVC里面特有的,ASP.NET里面本身就有的,只不过在WebForm里面一般比较少用,而在MVC里就是 ...

  2. php Calender(日历）代码

    代码如下: <?php /** * * 我的日历 * date_default_timezone_set date mktime * @param int $year * @param int ...

  3. JS获取屏幕高度

    主要使用了document对象关于窗口的一些属性,这些属性的主要功能和用法如下. 要 得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在netscape下需要使用w ...

  4. dictionary 添加数据

    var empList = from p in customers select new { p.Personnel_ID, p.PersonName }; var empTempList = emp ...

  5. 【jQuery基础学习】05 jQuery与Ajax以及序列化

    好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发 ...

  6. ActiveReports 报表应用教程 (4)---分栏报表

    在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印 ...

  7. [moka同学笔记]yii2.0查询数据库

      一. [:id占位符]使用 $results = Test::findBySql($sql,array(':id'=>'1 or 1=1))->all()   二. [id=1]  选 ...

  8. Glide

    1.简介 在泰国举行的谷歌开发者论坛上,谷歌为我们介绍了一个名叫 Glide 的图片加载库,作者是bumptech.这个库被广泛的运用在google的开源项目中,包括2014年google I/O大会 ...

  9. lambda 个人学习理解

    lambda是简化代码量的写用更简单的方法来写匿名方法 lambda左边是参数,右边是代码块(方法执行语句). 整体运算结果是根据左边参数,执行右边语句,返回右边执行的结果: 匿名方法是简化方法 1. ...

  10. Winform使用外部浏览器解决webbrowser问题

    对于还是一个菜鸟的我,在最近自己接手了个项目,搞的自己也是醉了,身边也有没大神的现场指导,只能靠度娘和谷歌的大力帮助,要不然这么个小项目可定现在还交不了,不过在这过程种也确确实实学到了不少东西,我先说 ...