checkbox组件 

 1 checkbox.css
 2 
 3 *{padding: 0;margin:0;}
 4 span{background: url(images/no.gif) no-repeat;padding-left: 20px;}
 5 .active{background: url(images/yes.gif) no-repeat;padding-left: 20px;}   
 6 input[type=radio]{display: none;}
 7 
 8 checkbox.js
 9 
10 (function (){
11     var addLink=false;
12     window.myCheckbox=function (aInp){
13         if (!addLink)
14         {
15             addLink=true;
16             var oLink=document.createElement('link');
17             oLink.href='myCheckbox.css';
18             oLink.rel='stylesheet';
19             var oHead=document.getElementsByTagName('head')[0];
20             oHead.appendChild(oLink);
21         }
22         var aSpan=[];
23         for (var i=0; i<aInp.length; i++)
24         {
25             var oSpan=document.createElement('span');
26             oSpan.innerHTML=aInp[i].getAttribute('data-tit');
27             aInp[i].parentNode.insertBefore(oSpan,aInp[i]);
28             aSpan.push(oSpan);
29         }
30         for (var i=0; i<aSpan.length; i++)
31         {
32             (function(index){
33                 aSpan[i].onclick=function (){
34                     if (this.className=='active')
35                     {
36                         this.className='';
37                         aInp[index].checked=false;
38                     }
39                     else
40                     {
41                         aSpan[index].className='active';
42                         aInp[index].checked=true;
43                     }
44                 };
45             })(i);       
46         }
47     };
48 })();
49 
50 
51 checkbox.html
52 
53 
54 <!DOCTYPE html>
55 <html>
56 <head>
57 <meta charset="utf-8" />
58     <title>agosto</title>
59 <style>
60 </style>
61 </head>
62 <script src="myCheckbox.js"></script>
63 <script>
64 window.onload=function (){
65     var drink=document.getElementById('drink').getElementsByTagName('input');
66     var frut=document.getElementById('frut').getElementsByTagName('input');
67     myCheckbox(drink);
68     myCheckbox(frut);
69 };   
70 </script>
71 <body>
72     <form action="test.html" method="get">
73         <!-- <span>酸奶</span>
74         <span>牛奶</span>
75         <span>咖啡</span>
76         <span>果汁</span> -->
77         <div id="drink">
78             <input type="checkbox" name="c1" value="yogus" data-tit="酸奶"/>
79             <input type="checkbox" name="c2" value="milk" data-tit="牛奶"/>
80             <input type="checkbox" name="c3" value="coffee" data-tit="咖啡"/>
81             <input type="checkbox" name="c4" value="juice" data-tit="果汁"/>
82         </div>       
83         <input type="submit" value="提交" />
84         <hr/>
85         <div id="frut">
86             <input type="checkbox" name="c1" value="apple" data-tit="苹果"/>
87             <input type="checkbox" name="c2" value="banna" data-tit="香蕉"/>
88             <input type="checkbox" name="c3" value="lemon" data-tit="柠檬"/>
89             <input type="checkbox" name="c4" value="grape" data-tit="葡萄"/>
90         </div>       
91         <input type="submit" value="提交" />
92     </form>
93 </body>
94 </html>

 

posted @ 2015-12-18 20:04  agosto  阅读(276)  评论(0)    收藏  举报