首页 > 代码库 > 我封装的第一个组件，单选按钮
我封装的第一个组件，单选按钮
在用别人的组件的时候，总是感觉东西太大，用起来还得查看，别人是怎么写的，如何用，所以自己也开始学习一下封装一个组件：在这里封装了一个自定义的单选框：
html代码 ：
<form id="form1" action="http://www.zhinengshe.com/" method="get"> 性别： <input type="radio" name="sex" value="http://www.mamicode.com/男" />男 <input type="radio" name="sex" value="http://www.mamicode.com/女" />女 <br /> <input type="submit" /></form>
css 部分：
.my_radio_off{width:18px; height:18px; display:inline-block; background: url(radio.gif) no-repeat 0 0;}.my_radio_on{width: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=http://www.mamicode.com/‘radio.css‘;>调用：
<script src="http://www.mamicode.com/radio.js"></script><script>$(function(){ myRadio(‘sex‘);})</script>
我封装的第一个组件，单选按钮
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。