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" οnchange="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样式被移除 |