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

最新推荐文章于 2024-03-20 09:44:30 发布

代码一天不写我浑森蓝廋

最新推荐文章于 2024-03-20 09:44:30 发布

阅读量7.5k

点赞数

分类专栏： JavaScript Html/Css

本文链接：https://blog.csdn.net/zhang197093/article/details/50589226

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Html/Css

8 篇文章 0 订阅

订阅专栏

从上图可以看出，不同的浏览器默认的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>

效果：