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>
