iCheck插件的全选、反选、获取值操作

1.js包下载

https://pan.baidu.com/s/1cJahbg

2.插件文档

http://www.bootcss.com/p/icheck/

3.引入js文件

<link type="text/css" rel="stylesheet" href="${link.contextPath}/js/icheck-1.x/skins/all.css"><script type="text/javascript" src="${link.contextPath}/js/jquery.min.js"></script><!-- bootstrap的js包 --><script type="text/javascript" src="${link.contextPath}/js/bootstrap-3.3.5/js/bootstrap.min.js"></script><!-- iCheck-1.x的复选框插件--><script type="text/javascript" src="${link.contextPath}/js/icheck-1.x/icheck.min.js"></script>

4.html文件

<div id="typeExceptionList" style="padding:auto 10px auto 10px;"></div>

5.js实现

// 加载复选框的数据function doLoadCheckBoxData() {asyncPost({url : "getExceptionDiagnoseOption.json",async : true,dataType : 'json',success : function(rst) {var optionData = rst.data;var str = '暂无数据';if (!isEmptyArray(optionData)) {str = '<div style="margin-top:8px;"><input type="checkbox" id="allOptionId" value="all"/>全选</div>';for ( var i = 0; i < optionData.length; i++) {str += '<div style="margin-top:8px;"><input type="checkbox" name="optionName" value="'+ optionData[i] + '"/>' + optionData[i] + '</div>';}}$("#typeExceptionList").html(str);                        //初始化iCheck                       $('input[type="checkbox"]').iCheck({handle : 'checkbox',checkboxClass : 'icheckbox_flat-red',radioClass : 'iradio_flat-red'});//全选$('#allOptionId').on('ifChecked', function(event){$('input').iCheck('check');});//反选$('#allOptionId').on('ifUnchecked', function(event){$('input').iCheck('uncheck');});}});}

6.详解

（1）全选：

$('#allOptionId').on('ifChecked', function(event){$('input').iCheck('check');});

（2）反选：

$('#allOptionId').on('ifUnchecked', function(event){$('input').iCheck('uncheck');});

（3）获取值：

var checkBoxArr = [];$('input[name="optionName"]:checked').each(function() {checkBoxArr.push($(this).val());});