jquery iCheck 插件

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

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

　　　　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样式被移除