JS实现的radio图片选择按钮效果

更新时间：2010年01月19日 03:06:02 作者：

用JS实现的radio图片选择按钮效果

用JS实现的radio图片选择按钮效果。注意：input后面的空格。
用到的图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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 = '1px solid #FF6600'; } else { oImg[i].style.border = '1px solid #008800'; } } } </script> <div class="lanrentuku"> <input type="radio" value= "lanrentuku" id= "111" name="aaa" style="display:none"> <img id="aa" src="/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="/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="/upload/2010-1/20100119030617561.gif" onclick="myFun(this.id)"> </div> <p>用JS实现的radio图片选择按钮效果。</p> <p>注意：input后面的空格。</p> <p>查找更多代码，请访问：<a href="https://www.jb51.net/" target="_blank">脚本之家</a></p> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

layui动态加载多表头的实例
今天小编就为大家分享一篇layui动态加载多表头的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
开发用到的js封装方法（20种）
在本问中我们给大家总结了20种开发中常用到的JS封装方法，有需要的读者们可以学习下。
2018-10-10
JavaScript DOM节点操作方法总结
下面小编就为大家带来一篇JavaScript DOM节点操作方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JavaScript实现点击按钮切换网页背景色的方法
这篇文章主要介绍了JavaScript实现点击按钮切换网页背景色的方法,涉及JavaScript基于鼠标事件动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
JavaScript前端实现压缩图片功能
这篇文章主要介绍了JavaScript前端实现压缩图片功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
JavaScript正则表达式简单实用实例
这篇文章主要介绍了JavaScript正则表达式简单实用实例的相关资料,需要的朋友可以参考下
2017-06-06
google地图的路线实现代码
google地图的路线实现代码，大家可以参考下，实现自己想要的功能。
2009-08-08
javascript 闭包
闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分，本文将用通俗的语言带您深入理解Javascript闭包的概念。
2011-09-09
微信小程序开发之获取用户手机号码(php接口解密)
这篇文章主要介绍了微信小程序开发之获取用户手机号码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
js实现仿QQ秀换装效果的方法
这篇文章主要介绍了js实现仿QQ秀换装效果的方法,实例分析了javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03

JS实现的radio图片选择按钮效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具