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

详细内容

[关闭窗口]

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

发布日期：2010-02-09 点击：7443

<!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.zdbase.com/" target="_blank">站点基地</a></p></body></html>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

注意：input后面的空格。

用到的图片：