jquery iCheck 插件

佚名 6年前 (2019-04-15) 随笔 1776人围观抢沙发百度已收录

1 官网：http://www.bootcss.com/p/icheck/#download

2 博客：https://www.cnblogs.com/xcsn/p/6307610.html

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　　　https://www.cnblogs.com/xp796/p/5508145.html

3 使用

首先：

<div class="form-group" id="polling-radio-wrap">
    <label class="col-xs-2 help-block"><span class="red">*</span>巡检任务类型</label>
    <div class="col-xs-9">
        <label for="" class="m-r-md">
            <input type="radio" class="i-checks" id="nomarl-polling"  name="cycle" value="0" checked > 单次
        </label>
        <label for="" class="m-r-md">
            <input type="radio" class="i-checks" id="cycle-polling" name="cycle" value="1"> 周期
        </label>
    </div>
</div>

<div id="nomarl-wrap">
    <div class="form-group">
        <label class="col-xs-2 help-block"><span class="red">*</span>设定巡检时间</label>
        <div class="col-xs-9">
            <div class="input-daterange input-group" id="datepicker">
                <input type="text" class="form-control form_datetime" name="begin_time" value="<?php echo date('Y/m/d H:00') ?>" autocomplete="off" readonly />
                <span class="input-group-addon">to</span>
                <input type="text" class="form-control form_datetime" name="end_time" value="<?php echo date('Y/m/d H:00',time()+86400) ?>" autocomplete="off" readonly />
            </div>
        </div>
    </div>
</div>

<div id="cycle-wrap" style="display: none;">  //默认是隐藏的     style="display: block;"  //显示的     $('#staff-info').css('display', 'none'

  <div class="form-group">

        <label class="col-xs-2 help-block"><span class="red">*</span>巡检周期</label>
        <div class="col-xs-2">
            <select name="cycle_type" class="form-control" onchange="cycle_typeSelect(event)">
                {% for op in cycle_type_arr %}
                <option value="{{op['value']}}">{{op['title']}}</option>
                {% endfor %}
            </select>
        </div>
        
    </div>
   
</div>



其次：初始化

$('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green'
});

最后：  ifClicked   回调事件

$('#polling-radio-wrap input.i-checks').on('ifClicked',function(event){     //格式
    var _this =event.target;   //1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远指向触发事件的DOM元素本身；2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$(this)和$(event.target).


    var v = $(_this).val();     //value 的值
    if(v==1){
        $('#nomarl-wrap').hide();   //设置隐藏还是显示
        $('#cycle-wrap').show();
    }else{
        $('#cycle-wrap').hide();
        $('#nomarl-wrap').show();
    }
});


拓展：

ifClicked	用户点击了自定义的输入框或与其相关联的label
ifChanged	输入框的 checked 或 disabled 状态改变了
ifChecked	输入框的状态变为 checked
ifUnchecked	checked 状态被移除
ifDisabled	输入框状态变为 disabled
ifEnabled	disabled 状态被移除
ifCreated	输入框被应用了iCheck样式
ifDestroyed	iCheck样式被移除