<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. ANT自动打包U3D安卓项目研究笔记

    概述 因项目使用Atlassian Stash作为项目源码管理端,且其支持Ant命令自动编译,可使其根据最新的代码自动打包,故产生该研究Ant打包的任务.在此将研究过程及一些相关知识整理记录在此. 本 ...

  2. 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式

    [源码下载] 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 绑定 通过 M ...

  3. 如何把maven项目转成web项目

    创建Web工程,使用eclipse ee创建maven web工程 1.右键项目,选择Project Facets,点击Convert to faceted from 2.更改Dynamic Web ...

  4. ajax提交复杂对象数据

    public class RouteItemManageReq { private List<WorkNodeReq> targetNodes; private RouteItemReq ...

  5. 最近提交并被合并的 jDiameter pull request 31 解决的问题

    使用过程中发现的问题都提交并合并了,应该会出现在1.7.0版本中: https://github.com/RestComm/jdiameter/pull/31 修复多个超时事件同时发生的问题. 修复B ...

  6. [WP8] Binding时，依照DataType选择DataTemplate

    [WP8] Binding时,依照DataType选择DataTemplate 范例下载 范例程序代码:点此下载 问题情景 在开发WPF.WP8...这类应用程序的时候,透过Binding机制搭配Da ...

  7. js argument实参集合与局部变量、参数关系

    形参 形式上传递的参数 function fn1(a,b,c) {//a,b,c就是形参 实参 实际传递的参数 fn1 (1,2,5);//1,2,5就是实参 argument 定义: 实参的集合 用 ...

  8. js实现拖拽

    拖拽:最核心是三个事件,鼠标按下,鼠标移动,鼠标弹起.按下时激活拖拽,然后时刻根据鼠标的位置来更新物体的left和top值,达到跟随鼠标的效果,鼠标弹起则取消拖拽. 以下是代码: <!DOCTY ...

  9. XML的约束(schema)

    XML Schema也是一种用于定义和描述XML文档结构与内容的模式语言,其出现是为了克服DTD的局限性 XML Schema符合XML语法结构 DOM.SAX等XML API很容易解析出XML Sc ...

  10. swift学习笔记之-构造过程

    //构造过程 import UIKit /* 构造过程(Initialization): 1.构造过程是使用类.结构体或枚举类型的一个实例的准备过程.在新实例可用前必须执行这个过程,具体操作包括设置实 ...