欢迎您
本月新增用户:
旗下累计用户:
签约动态:
签约吴先生网站制作达成合作
签约唐女士网站达成合作
签约长沙市开福区小毛驴食品便利店达成合作
签约长沙智在必行文化传播有限公司达成合作
签约长沙市雨花区鸿远数码达成合作
签约贺女士网站达成合作
签约湖南奥托曼国际贸易有限公司达成合作
签约承接长沙聂先生旅游网站业务
签约长沙孙先生网站达成合作
签约曹先生网站制作达成合作
签约湖南三谊医疗科技有限公司达成合作
签约长沙沃湘文化传播有限公司达成合作
签约长沙市山枫艺谷艺术培训学校达成合作
签约长沙市芙蓉区香琪电子产品商行达成合作
签约吕先生网站制作达成合作
签约湖南众乾节能环保科技达成合作
签约预承接长沙黄先生企业网站业务
签约长沙余女士网站达成合作
0731-84469346 / 152-7483-9229
首页
网站定制
小程序
智能建站
客户案例
关于我们
联系我们
0731-84469346
栏目导航:
首页
网站定制
小程序
智能建站
客户案例
关于我们
联系我们
网站首页
/
新闻动态
/
行业新闻
/ 浏览文章
更新时间:2015年10月21日
用JS实现的radio图片选择按钮效果
<!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="http://www.lanrentuku.com/down/js/images/12625207690.gif " onclick="myFun(this.id)"> <input type="radio" value= "lanrentuku" id= "222" name="aaa" style="display:none"> <img id="bb" src="http://www.lanrentuku.com/down/js/images/12625207691.gif" onclick="myFun(this.id)"> <input type="radio" value= "lanrentuku" id= "333" name="aaa" style="display:none"> <img id="cc" src="http://www.lanrentuku.com/down/js/images/12625207692.gif" onclick="myFun(this.id)"> </div> <p>用JS实现的radio图片选择按钮效果。</p> <p>注意:input后面的空格。</p> <p>作者:<a href="http://www.lanrentuku.com/blog/" target="_blank">西西</a> 尊重他人劳动,转载请保留出处!</p> <p>演示:<a href="http://www.maitianquan.com/plus/guestbook.php" target="_blank">麦田圈</a></p> <p>查找更多代码,请访问:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p> </body> </html>
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
用JS实现的radio图片选择按钮效果。
注意:input后面的空格。
上一篇:
select头像选择代码
下一篇:
解决div总是被select遮挡的问题
0731-84469346
返回顶部