icheck插件的使用

前端碰到了需要给input标签下的radio和checkbox设置不同的选择图片。选择用了icheck插件，想达到如下效果

icheck使用方法：

（1）代码中引入Jquery，icheck的CSS样式和js文件。这里我选择的是蓝色的样式，下载了官网上蓝色对应的CSS皮肤库。注意这里下载的除了blue.css文件，还有blue.png，[email protected]两个图片。文件样式如下：

代码引入如下：

    <link rel="stylesheet" href="css/blue.css">
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/icheck.js"></script>

（2）在JS文件中加上icheckc初始化代码

<script>
    $(document).ready(function(){
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%'
        });
    });
</script>

（3）所有type为radio或者checkbox的input标签都会生效。跟input标签起什么名字没什么关系。比如这里的三对是否，名字其实可以不起为iCheck。

      <ul>
        <li>
          <span class="choose"><input  type="radio" name="iCheck_1" >&nbsp&nbsp是</span>
          <span class="choose"><input type="radio" name="iCheck_1">&nbsp&nbsp否</span>
        </li>
        <li>
           <span class="choose"><input type="radio" name="iCheck_2">&nbsp&nbsp是</span>
           <span class="choose"><input type="radio" name="iCheck_2">&nbsp&nbsp否</span >
        </li>
        <li>
           <span class="choose"><input type="radio" name="iCheck_3">&nbsp&nbsp是</span>
           <span class="choose"><input type="radio" name="iCheck_3">&nbsp&nbsp否</span >
        </li>
      </ul>

（4）这里的图片样式是根据blue.css文件里的设置决定的。如果你想让radio呈现方框，或者checkbox呈现圆框，需要修改blue.css里的设置。同时支持选中框大小的改变。也要通过改blue.css实现。[email protected]是放大版的blue.png。

background: url([email protected]) no-repeat;

设置背景为[email protected]就是放大的选中框，默认是blue.png

.iradio_square-blue {
    background-position: 0 0;
}
.iradio_square-blue.checked {
    background-position: -97px 0;
}

我更改了这两个参数，让radio呈现的方框。大家也可以根据自己需要，像精灵图那样修改。