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();
}
});


拓展： ifClickedifChangedifCheckedifUncheckedifDisabledifEnabledifCreatedifDestroyed

用戶點擊了自定義的輸入框或與其相關聯的label

輸入框的?checked?或?disabled?狀態改變了

輸入框的狀態變為?checked

checked?狀態被移除

輸入框狀態變為?disabled

disabled?狀態被移除

輸入框被應用了iCheck樣式

iCheck樣式被移除

?

轉載于:https://www.cnblogs.com/yang1com/p/10709546.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jquery iCheck 插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。