如果你下定决心要改变现有的默认的checkbox和radio的样式，那么我目前有两种办法：
1、自己动手写一个，也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉，使用绝对定位的方式，手动切换checked和unchecked的图片，定位到原来input显示的地方；
2、使用jQuery的iCheck插件 。
中文DOC地址：http://www.bootcss.com/p/icheck/
github地址：https://github.com/fronteed/iCheck
一、先来说说第一种办法吧，我觉得这个是最好的，又不用多添加js，自己写几行代码就行了。
demo如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 <head>
4 <title></title>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6 <link rel="stylesheet" type="text/css" media="screen" href="grey.css" />
7 <script type="text/javascript" src="jquery.min.js"></script>
8 <script type="text/javascript" src="icheck.js"></script>
9 <style>
10 .checkbox-label {
11 position:relative;
12 display:block;
13 }
14 .hidebox {
15 opacity:0;
16 filter:alpha(opacity:0);
17 z-index:2;
18 position:relative;
19 }
20 .checkbox-label .checkbtn {
21 display:block;
22 width:12px;
23 height:12px;
24 left:5px;
25 top:-15px;
26 position:absolute;
27 background: url(checked.png) no-repeat;
28 }
29 .checkbox-label .uncheckbtn {
30 background: url(unchecked.png) no-repeat;
31 }
32 </style>
33 </head>
34 <body >
35 <div class="container">
36 <div class="header">
37 <h1>CheckBox And Radio Demo</h1>
38 </div>
39 <div>
40 <label class="checkbox-label">
41 <input type="checkbox" class="hidebox" checked/>复选框1号
42 <p class="checkbtn"></p>
43 </label>
44
45 <label class="checkbox-label">
46 <input type="checkbox" class="hidebox"/>复选框2号
47 <p class="checkbtn"></p>
48 </label>
49
50 <label class="checkbox-label">
51 <input type="checkbox" class="hidebox"/>复选框3号
52 <p class="checkbtn"></p>
53 </label>
54 </div>
55 </div>
56 <!-- /container -->
57 <script>
58 (function($){
59 $(‘input[type=checkbox]‘).on(‘click‘,function(){
60 var box = $(this),
61 mark = box.parent().find(‘.checkbtn‘);
62 $(this).prop(‘checked‘) ? mark.addClass(‘uncheckbtn‘) : mark.removeClass(‘uncheckbtn‘);
63 });
64 })(jQuery);
65 </script>
66
67 </body>
68 </html>
这是一个朋友（大牛）教我的方法，代码又少，写得又好，我也很喜欢。
这里面有的说的我感觉就是attr()和prop()方法，以前我没觉得有什么不同。但实际上还是有区别，简单来说吧，如果你想得到字符串的属性值的话那么就要用attr(),但如果你的本意是获得bool值得话，那么就要用prop()了。
二、那么如果你的项目比较大，兼容性封装性等各个方面要求比较严格的话，那么你可以尝试一下iCheck插件，但我目前还存在问题，如果你的checkbox和radio的功能比较简单的话，那么没有任何问题，但是如果你有全选部分选择的功能的话，那么你可能要花点心思了，我现在列出我的使用方法和心得，如果你有更好的解决其中问题的方法的话，请教教我喔，感激不尽。
简单使用真的简单，demo如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 <head>
4 <title></title>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6 <link rel="stylesheet" type="text/css" media="screen" href="grey.css" />
7 <script type="text/javascript" src="jquery.min.js"></script>
8 <script type="text/javascript" src="icheck.js"></script>
33 </head>
34 <body >
35 <div class="container">
36 <div class="header">
37 <h1>CheckBox And Radio Demo</h1>
38 </div>
39 <div>
40
41
42 <label class="checkbox-label">
43 <input type="checkbox" class="hidebox" id="box1" checked/>复选框1号
44 <p class="checkbtn"></p>
45 </label>
46
47 <label class="checkbox-label">
48 <input type="checkbox" class="hidebox" id="box2"/>复选框2号
49 <p class="checkbtn"></p>
50 </label>
51
52 <label class="checkbox-label">
53 <input type="checkbox" class="hidebox" id="box3"/>复选框3号
54 <p class="checkbtn"></p>
55 </label>
56
57
58
59 </div>
60 <div class="change">
61 <span class="toChecked">选中复选框1号和3号</span>
62 <span class="unChecked">取消选中复选框1号和3号</span>
63 <span class="toDisabled">disable复选框1号和3号单选框2号</span>
64 <span class="undisabled">取消disable复选框1号和3号单选框2号</span>
65 </div>
66 </div>
67 <!-- /container -->
68 <script>
69 $(document).ready(function(){
70 $(‘input‘).iCheck({
71 checkboxClass:‘icheckbox_flat-grey‘,
72 radioClass:‘iradio_flat-grey‘,
73 increaseArea:‘20%‘
74 });
75 });
76
77 $(‘.toChecked‘).click(function(){
78 $(‘#box1,#box3‘).iCheck(‘check‘);
79 });
80 $(‘.unChecked‘).click(function(){
81 $(‘#box1,#box3‘).iCheck(‘uncheck‘);
82 });
83 $(‘.toDisabled‘).click(function(){
84 $(‘#box1,#box3,#rad2‘).iCheck(‘disable‘);
85 });
86 $(‘.undisabled‘).click(function(){
87 $(‘#box1,#box3,#rad2‘).iCheck(‘enable‘);
88 });
89
90
91 </script>
92
93 </body>
94 </html>
然后去下载iCheck.js和像grey.css（多种可选）这样的样式文件就可以了，简单的就可以换样式了喔。
但是如果你想用到项目里，可能就没这么简单了。我踩过的坑有：
1、虽然iCheck的实现原理是在input外包裹一层div用来实现样式图片的切换，跟我们手动实现的原理差不多，但是虽然我们可能在浏览器中不容易显示的看出来，实际上input的checked属性也已经切换了；
2、如果你的input部分是在js中动态写进去的话，那么就要注意你有关iCheck的代码的位置，一定要等到dom全部加载完成之后。iCheck才会起作用。
3、还有一个还没有迈出来的坑，如果你的项目这个相关的功能需要完成，那么你可能需要在回调函数中完成一些操作，我的问题就在于，里面的操作实际上已经完成了（控制台可查看），但是我在其中调用的iCheck（）方法，却不起作用了，看了很多github上的issue，相同问题很多。
like this：
$("#_hs_select_all").on(‘ifChecked‘,function(){
$("._hs_item_cb").prop(‘checked‘,true).iCheck(‘check‘);
$("._hs_item_cld_cb").prop(‘checked‘,true).iCheck(‘check‘);
}).on(‘ifUnchecked‘,function(){
$("._hs_item_cb").prop(‘checked‘,false).iCheck(‘uncheck‘);
$("._hs_item_cld_cb").prop(‘checked‘,false).iCheck(‘uncheck‘); });
我也尝试过换2.x版本，但问题似乎更多，待解。
如果你也在换掉checkbox和radio默认的丑样式，两种方法都可任你选择。
论checkbox和radio的样式美化问题