jQuery icheck.js美化CheckBox radio使用详解

各位在审美方面有追求的小伙伴在开发的时候肯定对页面展示效果非常在意，力求完美，传统的HTML展示效果看上去肯定比较别扭，今天给大家推荐一款美观方便的jquery插件icheck，先上图大家看看效果

相比原始的复选框和单选按钮确实漂亮不少，没事就想去点点。

废话不多说，那接下来附上代码步骤，喜欢的朋友可以尝试下。

　 ① 选择配色方案（按钮颜色），引入CSS的时候指定,有10个不同的风格:

• Black — square.css
  Red — red.css
  Green — green.css
  Blue — blue.css
  Aero — aero.css
  Grey — grey.css
  Orange — orange.css
  Yellow — yellow.css
  Pink — pink.css
  Purple — purple.css

　② 复制skins文件夹和icheck.js文件到你的项目。

   ③ 在目标文件中引入css和JS文件，注意我这里引入的是green的配色方案，大家喜欢什么样式可以在步骤1中挑选配色方案

<link href="skins/square/green.css" rel="stylesheet">
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="icheck.js" type="text/javascript"></script>

   ④ 添加一些HTML复选框和单选按钮:

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

   ⑤ 使用jQuery事件将icheck插件的样式渲染到HTML中，注意这里的样式要和引入的一致。

<script type="text/javascript">
    $(document).ready(function(){
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
            increaseArea: '10%' // optional
         });
    });
</script>

▶  到这里我们的效果就已经实现了。这里就不贴图了。前面展示的几个案例就是。

▶  最后解释下 increaseArea属性是个啥意思，字面翻译是增加区域，其功能就是增加点击的有效区域，显示出来的复选框或按钮大小是不变的，但是增加区域之后，你可以点击旁边区域也能选中按钮，上图解释吧

上图是个复选框，increaseArea: '100%'，所以扩展了一倍的区域，灰色区域就是扩展的区域，所以大家点击灰色区域也能选中这个复选框。understand？还不明白的话你去点点就明白了。。。

资料大家可以去官网下载 http://icheck.fronteed.com/