admin 管理员组

文章数量: 1086019

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

1.js包下载


2.插件文档

/

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());
});



本文标签： iCheck插件的全选反选获取值操作

版权声明：本文标题：iCheck插件的全选、反选、获取值操作 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686729104a30152.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。