用图片来代替radio按钮，希望选中之后图片有所变化，应该怎么做，那位高人知道啊？急！！！！

我还想实现这么一个效果，就是在
<div style= "display:none "> <input type= "radio " value= "aaaaaa " id= "111 " > </div> <img src= "图片地址 " onclick= "form.111.checked=true;form.submit(); ">
<div style= "display:none "> <input type= "radio " value= "bbbbbb " id= "222 " > </div> <img src= "图片地址 " onclick= "form.222.checked=true;form.submit(); ">
这个基础上，要求点击图片，图片有所变化，也就是点击图片，选中这个选项，给图片加一个5px左右的外框，要怎么实现啊

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
</HEAD> <BODY>  <input  type= "radio"  value= "aaaaaa "  id= "111"  >啊啊 <img  src= "图片地址 "  onclick= "document.getElementById('111').checked=true;this.border='5px'">
  <input  type= "radio"  value= "bbbbbb "  id= "222"  > 往往 <img  src= "图片地址 "  onclick= "document.getElementById('222').checked=true;this.border='5px' ">  </BODY>
</HTML>
onclick= "form.111.checked=true;this.style.border='5px solid black'; "
运行之后radio那个小圆圈不要出现，并且是点击之后才外加5px的外框，第一次点击第一张图片，给第一张图片加外框，但是当第二次点击第二张图片的时候，第二张图片加外框，第一张图片的外框消失，也就是说点击那个图片，只有最后一次被点击的图片才加外框，该怎么做
我知道怎么隐藏radio选项了，还有刚才点击图片加外框还没有很好的解决，外框随着点击的图片走
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
</HEAD> <BODY>  <input  type= "radio"  value= "aaaaaa "  id= "111"  name="aaa" >啊啊 <img id="aa" src= "图片地址 "  onclick= "document.getElementById('111').checked=true;this.border='5px';bb.border='0px'">
  <input  type= "radio"  value= "bbbbbb "  id= "222"  name="aaa"> 往往 <img id="bb" src= "图片地址 "  onclick= "document.getElementById('222').checked=true;this.border='5px';aa.border='0px' ">  </BODY>
</HTML>
<input  type= "radio"  value= "aaaaaa "  id= "111"  name="aaa" >啊啊 <img id="aa" src= "图片地址 "  onclick= "document.getElementById('111').checked=true;this.border='5px solid #ccc';bb.border='0px'">
还是不起作用，我已经试过了，点击图片，边框的颜色还是黑色的啊，不知道应该怎么办了
如果改成this.style.border='5px solid #ccc';可以改变边框的颜色，但是单点击另外一张图片的时候，这个边框还在，有谁知道啊！
<scprit>
function xq(id){
var a;
if(a){a.style.border="";}
document.getElementById('111').checked=true;
document.getElementById(id).style.border='5px solid #ccc';
a=document.getElementById(id);
}
</scprit><img id="aa" src= "图片地址 "  onclick="xq(this.id)">
大概写的，没测试
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
</HEAD> <BODY>  <input  type= "radio"  value= "aaaaaa "  id= "111"  name="aaa" >啊啊 <img id="aa" src= "图片地址 "  onclick= "document.getElementById('111').checked=true;this.border='5px';bb.border='0px'">
  <input  type= "radio"  value= "bbbbbb "  id= "222"  name="aaa"> 往往 <img id="bb" src= "图片地址 "  onclick= "document.getElementById('222').checked=true;this.border='5px';aa.border='0px' ">  </BODY>
</HTML>我现在有40个  <input  type= "radio"  value= "aaaaaa "  id= "111"  name="aaa" >啊啊 <img id="aa" src= "图片地址 "  onclick= "document.getElementById('111').checked=true;this.border='5px';bb.border='0px'">这样的不同的选项，有没有简洁一点的方法使得点击另外一个选项的时候，边框加在另外一个选项的图片上，而原来的边框消失
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <script>
  function myFun(sId){
var oImg  = document.getElementsByTagName('img');

//var oI = document.getElementById(sId);
//v//r Pare = oI.parentNode;
for(var i = 0;i< oImg.length;i++){
if(oImg[i].id == sId){
oImg[i].parentNode.checked = true;
oImg[i].style.border = '5px solid #ccc';
}else{
oImg[i].style.border = '0px';

}
}
  }  </script>
</HEAD> <BODY>  <input  type= "radio"  value= "aaaaaa "  id= "111"  name="aaa" >啊啊 <img id="aa" src= "图片地址 "  onclick= "myFun(this.id)">
  <input  type= "radio"  value= "bbbbbb "  id= "222"  name="aaa"> 往往 <img id="bb" src= "图片地址 "  onclick= "myFun(this.id)">
  <input  type= "radio"  value= "bbbbbb "  id= "222"  name="aaa"> 噢噢 <img id="cc" src= "图片地址 "  onclick= "myFun(this.id)">
  <input  type= "radio"  value= "bbbbbb "  id= "222"  name="aaa"> 讷讷 <img id="dd" src= "图片地址 "  onclick= "myFun(this.id)">
  <input  type= "radio"  value= "bbbbbb "  id= "222"  name="aaa"> 哈哈 <img id="ee" src= "图片地址 "  onclick= "myFun(this.id)">

</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <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 = '5px solid #ccc';
}else{
oImg[i].style.border = '0px';

}
}
  }  </script>
</HEAD> <BODY>  <input  type= "radio"  value= "aaaaaa "  id= "111"  name="aaa" >啊啊 <img id="aa" src= "图片地址 "  onclick= "myFun(this.id)">
  <input  type= "radio"  value= "bbbbbb "  id= "222"  name="aaa"> 往往 <img id="bb" src= "图片地址 "  onclick= "myFun(this.id)">
  <input  type= "radio"  value= "bbbbbb "  id= "333"  name="aaa"> 噢噢 <img id="cc" src= "图片地址 "  onclick= "myFun(this.id)">
  <input  type= "radio"  value= "bbbbbb "  id= "444"  name="aaa"> 讷讷 <img id="dd" src= "图片地址 "  onclick= "myFun(this.id)">
  <input  type= "radio"  value= "bbbbbb "  id= "555"  name="aaa"> 哈哈 <img id="ee" src= "图片地址 "  onclick= "myFun(this.id)">

</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <script>
  var idOld = "";
  var idNew = "";
  function myFun(id){
    if(idNew != "") {
      idOld = idNew;
    }
    idNew = id;
    document.getElementById(idNew).style.border = "5px solid #ccc";
    if(idOld != "") {
      document.getElementById(idOld).style.border = "0px";
    }
  }  </script>
</HEAD>
<body>
  <img  src="图片地址" id="???" onclick="myFun(this.id);">
</body>
</html>我这个不用循环
2个变量解决问题
至于选中图片后前面的radio选中
那就设置radio的id为对应图片id后面加个1
如
radio id = "abc1"
img id = "abc";
script 里
radio id = id+""+1;