我封装的第一个组件，单选按钮

在用别人的组件的时候，总是感觉东西太大，用起来还得查看，别人是怎么写的，如何用，所以自己也开始学习一下封装一个组件：在这里封装了一个自定义的单选框：
html代码 ：

<form id="form1" action="http://www.zhinengshe.com/" method="get">
	性别：
	<input type="radio" name="sex" value="男" />男
	<input type="radio" name="sex" value="女" />女
	<br />
	<input type="submit" />
</form>

　css 部分：

.my_radio_off{18px; height:18px; display:inline-block; background: url(radio.gif) no-repeat 0 0;}
.my_radio_on{18px; height:18px; display:inline-block; background: url(radio.gif) no-repeat 0 -18px;}

　JS部分，在写之前，我先写了一个ready封装，好用ready,其实大家在做的时候，可以先把ready封好，回头直接调用，在这里把这个JS文件保存为：radio.js

function $(fn){
	if(document.addEventListener){
		document.addEventListener('DOMContentLoaded',fn,false);
	}else{
		document.onreadystatechange=function(){
			fn();
		}
	}
};


(function(){

	var added=false;

	window.myRadio=function (name){
		var aSe=document.getElementsByName(name);
		var aSpan=[];

		for(var i=0; i<aSe.length; i++){
			var oSpan=document.createElement('span');
			oSpan.className='my_radio_off';
			aSpan.push(oSpan);

			aSe[i].parentNode.insertBefore(oSpan,aSe[i]);
			aSe[i].style.display='none';
			(function(index){
				oSpan.onclick=function(){
					for(var i=0; i<aSpan.length; i++){
						aSpan[i].className='my_radio_off';
					}
					this.className='my_radio_on';
					aSe[index].checked=true;
				}
			})(i);
		}
	};

	if(added==true)return;
	added=true;

	var oLink=document.createElement('link');
	oLink.href='radio.css';
	oLink.rel='stylesheet';
	var oHead=document.getElementsByTagName('head')[0];
	oHead.appendChild(oLink);

})()

　　调用：

<script src="radio.js"></script>
<script>
$(function(){
	myRadio('sex');
})
</script>