本文介绍如何使用JavaScript实现Radio图片选择按钮效果。通过将隐藏的Radio输入框与图片关联,点击图片即可触发选中状态。代码示例展示了HTML结构与JS逻辑的结合,注意input标签后需保留空格以确保正确渲染。
JS实现Radio图片选择按钮效果
本文介绍如何使用JavaScript实现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> <div class="lanrentuku"> <input type="radio" value= "lanrentuku" id= "111" name="aaa" style="display:none"> <img src="/upload/2010-1/20100119030617615.gif " /> <input type="radio" value= "lanrentuku" id= "222" name="aaa" style="display:none"> <img src="/upload/2010-1/20100119030617308.gif" /> <input type="radio" value= "lanrentuku" id= "333" name="aaa" style="display:none"> <img src="/upload/2010-1/20100119030617561.gif" /> </div> <p>用JS实现的radio图片选择按钮效果。</p> <p>注意:input后面的空格。</p> <p>查找更多代码,请访问:本站</p> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]