1 官網(wǎng)：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>巡檢任務(wù)類型</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>設(shè)定巡檢時間</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;"> //默認(rèn)是隱藏的 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 回調(diào)事件 $('#polling-radio-wrap input.i-checks').on('ifClicked',function(event){ //格式
var _this =event.target; //1.js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠(yuǎn)指向觸發(fā)事件的DOM元素本身；2.this和event.target都是dom對象，使用jQuey中的方法可以將他們轉(zhuǎn)換為jquery對象：$(this)和$(event.target).
var v = $(_this).val(); //value 的值
if(v==1){
$('#nomarl-wrap').hide(); //設(shè)置隱藏還是顯示
$('#cycle-wrap').show();
}else{
$('#cycle-wrap').hide();
$('#nomarl-wrap').show();
}
});


拓展： ifClickedifChangedifCheckedifUncheckedifDisabledifEnabledifCreatedifDestroyed

用戶點擊了自定義的輸入框或與其相關(guān)聯(lián)的label

輸入框的?checked?或?disabled?狀態(tài)改變了

輸入框的狀態(tài)變?yōu)?checked

checked?狀態(tài)被移除

輸入框狀態(tài)變?yōu)?disabled

disabled?狀態(tài)被移除

輸入框被應(yīng)用了iCheck樣式

iCheck樣式被移除

?

轉(zhuǎn)載于:https://www.cnblogs.com/yang1com/p/10709546.html

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。