jquery 美化input checkbox 复选框

jquery 美化input checkbox 复选框

 

演示

 

 

XML/HTML Code

1. <div id="chklist">  
2. <input type="checkbox" value='1' checked/><label>aaaaaa</label>  
3. <input type="checkbox" value='2' /><label>bbbbbb</label>  
4. <input type="checkbox" value='3' /><label>ccccc</label>  
5. <input type="checkbox" value='4' /><label>ddddd</label>  
6. </div>  

 

JavaScript Code

1.  <script type="text/javascript">  
2. (function(){  
3. $('#chklist').hcheckbox();  
4. $('#radiolist').hradio();  
5. $('#btnOK').click(function(){  
6.     var checkedValues = new Array();  
7.     $('#chklist :checkbox').each(function(){  
8.         if($(this).is(':checked'))  
9.         {  
10.             checkedValues.push($(this).val());  
11.         }  
12.     });  
13.   
14.     alert(checkedValues.join(','));  
15.     alert($('#radiolist :checked').val());  
16. })  
17. );  
18.  </script>  

 

原文地址:http://www.freejs.net/article_biaodan_188.html