myRadio .css
*{padding: 0;margin:0;} span{background: url(images/no.gif) no-repeat;padding-left: 20px;} .active{background: url(images/yes.gif) no-repeat;padding-left: 20px;} input[type=radio]{display: none;} myRadio .js
(function (){ var addLink=false; window.myRadio=function (aInp) { if (!addLink) { addLink=true; var oLink=document.createElement('link'); oLink.href='myRadio.css'; oLink.rel='stylesheet'; var oHead=document.getElementsByTagName('head')[0]; oHead.appendChild(oLink); } var aSpan=[]; for (var i=0; i<aInp.length; i++) { var oSpan=document.createElement('span'); oSpan.innerHTML=aInp[i].getAttribute('data-tit'); aSpan.push(oSpan); aInp[i].parentNode.insertBefore(oSpan,aInp[i]); if (aInp[i].checked) { aSpan[i].className='active'; } } for (var i=0; i<aSpan.length; i++) { (function (index){ aSpan[i].onclick=function (){ for (var i=0; i<aSpan.length; i++) { aSpan[i].className=''; } aSpan[index].className='active'; aInp[index].checked=true; }; })(i); } } })(); radios.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>agosto</title> <style> </style> </head> <script src="myRadio.js"></script> <script> window.onload=function (){ var sex=document.getElementsByName('sex'); var blod=document.getElementsByName('blod'); myRadio(sex); myRadio(blod); }; </script> <body> <form action="test.html" method="get"> <!-- <span class="active">男</span> <span>女</span> --> <input type="radio" name="sex" value="male" checked data-tit="男"/> <input type="radio" name="sex" value="female" data-tit="女"/> <input type="submit" value="提交"/> <hr/> <input type="radio" name="blod" value="o" checked data-tit="O型" /> <input type="radio" name="blod" value="B" data-tit="B型" /> <input type="radio" name="blod" value="A" data-tit="A型" /> <input type="radio" name="blod" value="AB" data-tit="AB型" /> <input type="submit" value="提交" /> </form> </body> </html>