基本信息
源码名称：js实现的 图片单选按钮效果
源码大小：1.42KB
文件格式：.html
开发语言：CSS
更新时间：2016-05-24
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍
用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=utf-8" /> 
<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://img1.niutuku.com/tech/1208/2411/tech-2411-gnjjpniabjc.gif " onclick="myFun(this.id)"> 
<input type="radio" value= "lanrentuku" id= "222" name="aaa" style="display:none"> <img id="bb" src="http://img1.niutuku.com/tech/1208/2411/tech-2411-bzqz2cxqwqd.gif" onclick="myFun(this.id)"> 
<input type="radio" value= "lanrentuku" id= "333" name="aaa" style="display:none"> <img id="cc" src="http://img1.niutuku.com/tech/1208/2411/tech-2411-tsa03lio42y.gif" onclick="myFun(this.id)"> 
</div> 
<p>用js实现的radio图片选择按钮效果。</p> 
</body> 
</html>