<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. Linq专题之对象初始化器

    在C#3.0之前,如果创建一个新的对象,往往需要调用类的构造函数来初始化该对象的值,在c#3.0提供了一个"对象初始化器"的机制,使得开发人员在创建新的对象时不通过调用类的构造函数 ...

  2. Chrome弹窗的简单应用（选择结构与循环结构）

    ★选择结构★ ★JS实现弹窗显示随机数 示例代码效果图   ★ 弹窗实现对随机数的进一步判断 示例代码效果图 ★综合应用   比较大小 ★ 判断成绩等级 ): : : : : alert(" ...

  3. LeetCode129：Sum Root to Leaf Numbers

    题目: Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a nu ...

  4. Install gocode

    1. D:\AWS_workspace\DAAS_Go>go get -u -ldflags -H=windowsgui github.com/nsf/gocode 2. Then gocode ...

  5. [moka同学笔记]yii2 activeForm 表单样式的修改

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAv4AAANcCAIAAACopDy/AAAgAElEQVR4nOzdfXAb52H4ef1veSatRV

  6. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  7. ABAP 搜索帮助

    当选择屏幕上的一个字段所参考的数据元素没有建立搜索帮助时,可以手工建立一个: 1.在se11创建一个搜索帮助ZAUTEST,需要输入: (1)描述: (2)选择方法:即搜索帮助显示字段所在的透明表: ...

  8. ABAP - 3D Graphs with SAP

    在ABAP设计中,程序员经常需要用图形显示报表的统计结果,我们可以使用函数:GRAPH_MATRIX_3D来达到图形显示.GRAPH_MATRIX_3D函数参数很多,但只有三个参数必须需要输入:Tab ...

  9. MSCRM 迁移 数据库 服务器

    Move the Microsoft Dynamics CRM databases to another SQL Server and SQL Server Reporting Services se ...

  10. Microsoft Dynamics CRM 2013 安装过程 图解

    在安装前,先持一下SQL配置管理,将相关的服务打开.(由于在虚拟机里,许多服务需要时才会打开,像Reporting Services需要处理报表时才打开) 注:Analysis Services 登录 ...