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

iCheck插件的全选、反选、获取值操作相关推荐

JavaScript实现表单的全选,反选,获取值
构思通过for循环和for in循环来实现,界面效果如下步骤全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...
CheckBox复选框全选以及获取值(转)
原文链接:http://hi.baidu.com/dabaodream/blog/item/c51f5bfaa4a5f71ed8f9fd3d.html 页面代码: <html> <h ...
html dom反选,Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路: 首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那 ...
java做全选反选功能_[Java教程]js实现全选反选
[Java教程]js实现全选反选 0 2017-04-04 00:00:12 在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码快递 ...
js、jquery操作复选框checkbox总结（单个/多个获取选中值、初始化设置默认选中值、全选反选）
一.单个复选框使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
2019独角兽企业重金招聘Python工程师标准>>> JQuery是一个非常容易上手的框架,但是有很多东西需要我们深入学习的. 判断checkbox是否被选中网上有选多种写法,这里 ...
复选框全选以及获取所有选中的值
复选框全选以及获取所有选中的值总结一下 jsp中获取数据 <%Map<String,List> map = (Map<String,List>)Function ...
android 获取通讯录全选反选_Android Recyclerview实现多选,单选,全选,反选,批量删除的功能...
效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

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

1.js包下载

2.插件文档

3.引入js文件

4.html文件

5.js实现

6.详解

iCheck插件的全选、反选、获取值操作相关推荐

最新文章

热门文章