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>