您现在的位置是:网站首页>>前端技术>>html+css+js

使用icheck插件实现复选框、单选框控件美化

发布时间:2020-05-22 11:37:33作者:wangjian浏览量:31点赞量:0

    icheck插件github地址:https://github.com/fronteed/icheck

    icheck插件的简单使用

    1:引入css

    <link rel="stylesheet" href="/icheck/skins/all.css">

    2:引入js

     <!--引入jquery-->
    <script src="/js/jquery.min.js"></script>
    <!--引入icheck-->
    <script src="/icheck/icheck.min.js"></script>

    3:复选框使用

    (1)html

    <label for="fuxuan[1]">复选一</label>
    <input type="checkbox" name="fuxuan[1]" id="fuxuan[1]"/>
    <label for="fuxuan[2]">复选二</label>
    <input type="checkbox" name="fuxuan[2]"  id="fuxuan[2]"/>
    <label for="fuxuan[3]">复选三</label>
    <input type="checkbox" name="fuxuan[3]"  id="fuxuan[3]"/>

    (2)js

    //初始化
    $('input[type="checkbox"]').iCheck({
        checkboxClass: 'icheckbox_flat-blue',
    });

    现象如下:

    image.png

    4:单选框使用

    (1)html

    <label for="danxuan[1]">单选一</label>
    <input type="radio" name="danxuan" id="danxuan[1]"/>
    <label for="danxuan[2]">单选二</label>
    <input type="radio" name="danxuan"  id="danxuan[2]"/>
    <label for="danxuan[3]">单选三</label>
    <input type="radio" name="danxuan"  id="danxuan[3]"/>

    (2)js

    //初始化
    $('input[type="radio"]').iCheck({
        radioClass   : 'iradio_flat-blue'
    });

    现象如下:

    image.png

    5:icheck插件的常用时间

    (1):ifClicked(点击事件)

    $('input').on('ifClicked', function(event){
        alert('点击事件');
    });

    (2):ifChanged(改变事件)

    $('input').on('ifChanged', function(event){
        alert('改变事件');
    });

    (3):ifChecked(选中事件)

    $('input').on('ifChecked', function(event){
        alert('选中事件');
    });

0 +1