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>
