1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>表单及按钮的美化</title> 5 <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script> 6 <script type="text/javascript"> 7 ;(function($){ 8 $.fn.hcheckbox=function(options){ 9 $(':checkbox+label',this).each(function(){ 10 $(this).addClass('checkbox'); 11 if($(this).prev().is(':disabled')==false){ 12 if($(this).prev().is(':checked')) 13 $(this).addClass("checked"); 14 }else{ 15 $(this).addClass('disabled'); 16 } 17 }).click(function(event){ 18 if(!$(this).prev().is(':checked')){ 19 $(this).addClass("checked"); 20 $(this).prev()[0].checked = true; 21 } 22 else{ 23 $(this).removeClass('checked'); 24 $(this).prev()[0].checked = false; 25 } 26 event.stopPropagation(); 27 } 28 ).prev().hide(); 29 } 30 31 $.fn.hradio = function(options){ 32 var self = this; 33 return $(':radio+label',this).each(function(){ 34 $(this).addClass('hRadio'); 35 if($(this).prev().is("checked")) 36 $(this).addClass('hRadio_Checked'); 37 }).click(function(event){ 38 $(this).siblings().removeClass("hRadio_Checked"); 39 if(!$(this).prev().is(':checked')){ 40 $(this).addClass("hRadio_Checked"); 41 $(this).prev()[0].checked = true; 42 } 43 44 event.stopPropagation(); 45 }) 46 .prev().hide(); 47 } 48 })(jQuery) 49 </script> 50 <style> 51 label.checkbox {padding-left: 24px; cursor:pointer;background: url(http://www.codefans.net/jscss/demoimg/201105/checkbox.png) no-repeat left -21px; line-height:22px; height:21px; display:inline-block; } 52 label.checked {background-position:left 100%; } 53 label.disabled{background-position:left 0px;} 54 .hRadio 55 { 56 padding-left: 22px; display: inline-block; 57 background: transparent url(http://www.codefans.net/jscss/demoimg/201105/radio.png) no-repeat left top; 58 height: 19px; line-height:20px; 59 cursor:pointer;vertical-align:middle; 60 } 61 .hRadio_Checked { background-position: left bottom;} 62 </style> 63 <script type="text/javascript"> 64 $(function(){ 65 $('#chklist').hcheckbox(); 66 $('#radiolist').hradio(); 67 $('#btnOK').click(function(){ 68 var checkedValues = new Array(); 69 $('#chklist :checkbox').each(function(){ 70 if($(this).is(':checked')) 71 { 72 checkedValues.push($(this).val()); 73 } 74 }); 75 76 alert(checkedValues.join(',')); 77 alert($('#radiolist :checked').val()); 78 }) 79 }); 80 </script> 81 </head> 82 83 <body> 84 <div id="chklist" style="padding:10px; font-size:14px; "> 85 <input type="checkbox" value='1' /><label>aaaaaa</label> 86 <input type="checkbox" value='2' /><label>bbbbbb</label> 87 <input type="checkbox" value='3' /><label>ccccc</label> 88 <input type="checkbox" value='4' /><label>ddddd</label> 89 </div> 90 91 <div id="radiolist" style="padding:10px; font-size:14px; "> 92 <input name='r' type="radio" value='11' /><label>AAAAAA</label> 93 <input name='r' type="radio" value='21' /><label>BBBBBBBB</label> 94 <input name='r' type="radio" value='31' /><label>CCCCCC</label> 95 <input name='r' type="radio" value='41' /><label>DDDDDD</label> 96 </div> 97 <input type="button" value="确定" id="btnOK" /> 98 </body> 99 </html>