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>
