icheck插件的使用

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

icheck使用方法：

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

代码引入如下：

    <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实现。blue@2x.png是放大版的blue.png。

background: url(blue@2x.png) no-repeat;

设置背景为blue@2x.png就是放大的选中框，默认是blue.png

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

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

icheck插件的使用相关推荐

Bootstrap的iCheck插件checkbox和radio
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phone等 ...
iCheck插件使用
最近项目里正好用到这个插件,奈何记性不好 ,每次都得查资料,写在这里一劳永逸,欢迎大家提意见,共勉.好啦,上代码. 1.引用对应文件首先需要去下载icheck插件必要的js和css文件,贴一个非唯一 ...
bootstrap的icheck插件使用
由于我们在项目开发时会经常用到单选框和复选框,并且众所周知其样式不易修改,它们的原有样式不能满足我们项目美观所需,所以这个时候icheck插件就能帮到我们不少呢,下来我就来说说icheck插件的使用: ...
iCheck插件全选和获取value值的解决方法
在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了. $("#checkall").click(function(){if(this ...
iCheck插件的基础用法
iCheck插件的基础用法 1.初始化: 选中元素进行初始化: $('input').iCheck({checkboxClass: 'icheckbox_flat-blue', //选择框的风格.ra ...
iCheck插件的全选、反选、获取值操作
1.js包下载 https://pan.baidu.com/s/1cJahbg 2.插件文档 http://www.bootcss.com/p/icheck/ 3.引入js文件 <link ty ...
JQuery的iCheck插件使用方法
iCheck 概要表单复选框.单选框控件美化插件,主要作用为: 渲染并美化当前页面的复选框或单选框响应复选框或单选框的点击事件页面引用 css部分 1 <!-- iCheck for ch ...
jquery iCheck 插件
1 官网:http://www.bootcss.com/p/icheck/#download 2 博客:https://www.cnblogs.com/xcsn/p/6307610.html http ...
使用iCheck插件，如何创建chenge事件
input上增加了onChenge事件或onClick事件,都不能做到选中"点击并且焦点转到新的项上" 遇到这个问题咋处理? 解决办法: 1.通过设置选中事件,先改变当前选中项: ...

icheck插件的使用

icheck插件的使用相关推荐

最新文章

热门文章