码迷,mamicode.com
首页 > 其他好文 > 详细

checkbox组件

时间:2015-12-18 21:21:48      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:

 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>

 

checkbox组件

标签:

原文地址:http://www.cnblogs.com/agosto/p/5058103.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!