2019-07-24 神奇的iCheck-简单、实用

最新推荐文章于 2024-09-24 16:08:49 发布

程序员不弃

最新推荐文章于 2024-09-24 16:08:49 发布

阅读量1.4w

点赞数

分类专栏：【前端小酌】文章标签： iCheck Bootstrap radio checkbox

本文链接：https://blog.csdn.net/kye055947/article/details/81195325

版权

【前端小酌】专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.使用背景

项目中常用bootstrap作为前端开发框架，但是发现单选框和复选框的样式和Bootstrap
的样式不匹配，而且要调整单选框和复选框的样式挺麻烦的；

未引入iCheck插件的单选框和复选框

2.iCheck简介

iCheck官网介绍：
iCheck官网简介

3.下载iCheck

在GitHub中下载 iCheck.下载完成之后，解压：iCheck目录结构如图所示：
iCheck的Demo目录结构

4.使用iCheck

4.1 引入icheck.js文件

4.2 ICheck插件提供了几套非常好看的皮肤，供咱们选择。已Square皮肤为例，引入对应目录相应样式的css文件和图片，如我要引入红色样式red.css、red.png、red@2x.png

4.3 HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.1.9.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/ichecktest.js"></script>
        <script src="js/icheck.js"></script>
        <link rel="stylesheet" href="skins/all.css" />
        <link rel="stylesheet" href="skins/flat/red.css" />
        <link rel="stylesheet" href="skins/square/red.css" />
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            div{
                margin-left: 5%;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <h3>未引入icheck插件的单选框和复选框</h3>
        <div>
            <input type="checkbox" id="ACheckbox" name="oldCheckbox" value="A"/>篮球
            <input type="checkbox" id="BCheckbox" name="oldCheckbox" value="B"/>足球
        </div>
        <div>
            <input type="radio" name="oldsex" value="man"/>男
            <input type="radio" id="oldsex" value="woman"/>女
        </div>

        <h3>复选框</h3>
        <div><input type="checkbox" id="allResource" value="all"/>全选</div>

        <div><input type="checkbox" name="newCheckbox" value="1"/>A</div>
        <div><input type="checkbox" name="newCheckbox" value="2"/>B</div>
        <div><input type="checkbox" name="newCheckbox" value="3"/>C</div>

        <h3>单选框</h3>
        <div>
            <input type="radio" name="sex" value="man"/>男
            <input type="radio" name="sex" value="woman"/>女
        </div>

    </body>
</html>

4.4 JS代码

$(function(){
    //checkbox初始化
    $('input[name="newCheckbox"]').iCheck({
                handle : 'checkbox',
                checkboxClass : 'icheckbox_flat-red',
                radioClass : 'iradio_flat-red'
    })

    //checkbox初始化
    $("#allResource").iCheck({
        handler:'checkbox',
        checkboxClass:'icheckbox_flat-red'
    })

    //radio初始化
    $("input[name='sex']").iCheck({
        handler:'checkbox',
        radioClass:'iradio_square-red'
    })

    //全选功能
    $("#allResource").on("ifChanged",function(event){
        var checkVal = $(this).prop("checked");
        if(checkVal){
            $("input[name='resource']").iCheck("check");
        }else{
            $("input[name='resource']").iCheck("uncheck");
        }

    })
})

4.5 效果：

4.6 拓展：iCheck的六套皮肤

Minimal skin

Square skin

Square skin )

Flat skin

Flat skin )

Line skin

Polaris skin

Polaris skin )

Futurico skin

Futurico skin )

skin )

4.7 iCheck颜色

 iCheck皮肤:

    Black — minimal.css //黑色

    Red — red.css //红色

    Green — green.css //绿色

    Blue — blue.css //蓝色

    Aero — aero.css //win7中的那种玻璃效果

    Grey — grey.css //银灰色

    Orange — orange.css //橙色

    Yellow — yellow.css //黄色

    Pink — pink.css //粉红色

    Purple — purple.css //紫色

4.8 iCheck使用方法

$('input').iCheck('check');   //将输入框的状态设置为checked 
$('input').iCheck('uncheck'); //移除 checked 状态 
$('input').iCheck('toggle');  //toggle checked state 
$('input').iCheck('disable'); //将输入框的状态设置为 disabled 
$('input').iCheck('enable');  //移除 disabled 状态 
$('input').iCheck('update');  //apply input changes, which were done outside the plugin 
$('input').iCheck('destroy'); //移除iCheck样式

4.9 iCheck基本使用方法

//基础使用方法 
$('input[type='checkbox'],input[type='radio']').iCheck({ 
    labelHover : false, 
    cursor : true, 
    checkboxClass : 'icheckbox_square-blue', 
    radioClass : 'iradio_square-blue', 
    increaseArea : '20%' 
    });

借鉴blogbootstrap的icheck插件的使用