参考网址:http://www.bootcss.com/p/icheck/
PS: 结合bootstrap使用,需留意input:margin-left: -20px;的影响, 可对input.radio 反向应用 parent.ele.checkbox[checked-inline]
<script src="../js/plugins/iCheck/icheck.min.js"></script>
<link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
<label class="col-sm-2 control-label">复选框</label>
<div class="col-sm-3">
<label class="radio-inline i-checks"> <input type="checkbox" checked value="option1" name="islocal"> demo1 </label>
<label class="radio-inline i-checks"> <input type="checkbox" value="option2" name="islocal"> demo2 </label>
</div>
<label class="col-sm-2 control-label">单选框</label>
<div class="col-sm-3">
<label class="checkbox-inline i-checks"> <input type="radio" checked value="option1" name="islocal1"> 是 </label>
<label class="checkbox-inline i-checks"> <input type="radio" value="option2" name="islocal1"> 否 </label>
</div>
// 应用于所有input (只应用于 checkboxes and radio buttons)
$('input').iCheck();
// 应用于 class=block 内部的所有 checkboxes and radio
$('.block input').iCheck();
// 应用于 class=vote 内部的所有 checkboxes and radio
$('.vote').iCheck();
$('input').iCheck('check'); // 将输入框的状态设置为checked
$('input').iCheck('uncheck'); // 移除 checked 状态
$('input').iCheck('toggle'); // toggle checked state
$('input').iCheck('disable'); // 将输入框的状态设置为 disabled
$('input').iCheck('enable'); // 移除 disabled 状态
$('input').iCheck('update'); // apply input changes, which were done outside the plugin
$('input').iCheck('destroy'); // 移除iCheck样式
| 事件名称 | 使用时机 |
|---|---|
| ifClicked | 用户点击了自定义的输入框或与其相关联的label |
| ifChanged | 输入框的 checked 或 disabled 状态改变了 |
| ifChecked | 输入框的状态变为 checked |
| ifUnchecked | checked 状态被移除 |
| ifDisabled | 输入框状态变为 disabled |
| ifEnabled | disabled 状态被移除 |
| ifCreated | 输入框被应用了iCheck样式 |
| ifDestroyed | iCheck样式被移除 |
/* 全选 演示地址: http://www.cctvplus.com/news/latest.shtml */
$('#Locations_data_box input[type="checkbox"]').on('ifChecked ifUnchecked',function(e_){
var inp_data_all_ = $('#Locations_data_box input[type="checkbox"][class="data_all"]');
var inp_data_items_ = $('#Locations_data_box input[type="checkbox"][class="data_item"]');
if($(this).hasClass('data_all')){//点击全选
if(e_.type == 'ifChecked'){
inp_data_items_.prop('checked','checked');
}else{
inp_data_items_.removeProp('checked');
}
inp_data_items_.iCheck('update').iCheck('enable');
}
var che_1=[];
$('#Locations_data_box input[type="checkbox"][class="data_item"]:checked').each(function(){
che_1.push($(this).val());
});
if(che_1.length>0){
seach_check_LL['LOCATIONS_'] = che_1.join(',');
search_fun_LL(1);
if(che_1.length == inp_data_items_.length){
inp_data_all_.prop('checked','checked').iCheck('update').iCheck('enable'); //注意顺序
}else{
inp_data_all_.removeProp('checked').iCheck('update').iCheck('enable');
}
}else{
seach_check_LL['LOCATIONS_'] ='';
//inp_data_all_.removeProp('checked').iCheck('update');
//cusmot_alert_fun('Please select at least one Locations');
}
});
/* 自定义数据状态修改、初始化 演示地址: http://www.cctvplus.com/news/latest.shtml */
if(seach_check_LL['LOCATIONS_']){
var g_3 = seach_check_LL['LOCATIONS_'].split(',');
$('#Locations_data_box input[type="checkbox"][class="data_item"]').each(function(){
if(jQuery.inArray($(this).val(), g_3)!==-1){
$(this).prop('checked','checked');
}else{
$(this).removeProp('checked');
}
$(this).iCheck('update');
});
if($('#Locations_data_box input[type="checkbox"][class="data_item"]').not(':checked').length==0){
$('#Locations_data_box input[type="checkbox"][class="data_all"]').prop('checked','checked').iCheck('update');
}
}