icheck(自定义单、复选框)

参考网址: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 输入框的 checkeddisabled 状态改变了
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');
    }
}