参考网址: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'); } }