用jquery.icheck.js插件美化复选框

来源：互联网发布：耽美网络剧小受是猫编辑：程序博客网时间：2024/06/06 08:42

从上图可以看出，不同的浏览器默认的checkbox样式差别非常的大，而且不够美观。这里我向大家推荐icheck 这款jquery插件，以实现美化效果。

icheck插件特色：

在不同浏览器和设备上都有相同的表现 — 包括桌面和移动设备
支持触摸设备 — iOS、Android、BlackBerry、Windows Phone
支持键盘导航 — Tab、Spacebar、Arrow up/down 和其它快捷键
方便定制 — 用HTML 和 CSS 即可为其设置样式 (试试 6 套针对Retina屏幕的皮肤吧)
支持 jQuery 和 Zepto JavaScript工具库
体积小巧 — gzip压缩后只有1 kb
25 种参数用来定制复选框（checkbox）和单选按钮（radio button）
8 个回调事件用来监听输入框的状态
7 个方法用来通过编程方式控制输入框的状态
能够将输入框的状态变化同步回原始输入框中，支持所有选择器

使用案例：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>    <script src="icheck.min.js"></script>    <link rel="stylesheet" href="polaris/polaris.css"></head><body style="width: 1200px;margin: 100px auto;background: #2e3035"><input type="radio" name="gender" />男<input type="radio" name="gender" />女<br><br><input type="checkbox" name="hobby">篮球<input type="checkbox" name="hobby">足球<input type="checkbox" name="hobby">排球<input type="checkbox" name="hobby">乒乓球<script>    $(function(){        $('input[type="radio"],input[type="checkbox"]').iCheck({            checkboxClass: 'icheckbox_polaris',            radioClass: 'iradio_polaris'        })    })</script></body></html>

效果：

更多详细使用方法请参考：

http://www.bootcss.com/p/icheck/

0 0