BootStrap iCheck插件全选与获取value值的解决方法


Posted in Javascript onAugust 24, 2016

在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了。

$("#checkall").click(
function(){
if(this.checked){
$("input[name='checkname']").each(function(){this.checked=true;});
}else{
$("input[name='checkname']").each(function(){this.checked=false;});
}
}
);

这样来写对默认的checkbox框没问题,但是当使用iCheck 插件后将无效。

那么该怎么解决呢?

最后是在stackoverflow 找到的解决方法:

地址是这里: http://stackoverflow.com/questions/17820080/function-select-all-and-icheck

//全选获取数值
var checkAll = $('input.all');
var checkboxes = $('input.check');
checkAll.on('ifChecked ifUnchecked', function(event) {
if (event.type == 'ifChecked') {
checkboxes.iCheck('check');
} else {
checkboxes.iCheck('uncheck');
}
});
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
});

在解决了全选问题后,又遇到了一个新的问题,获取选中的checkbox的value的时候,使用:$(this).attr('checked');获取不到值了~,蛋疼。

最后几经Google搜索,还是在stackoverflow 找到了启发,判断checkbox的布尔值,使用 :$(this).is(':checked');

最后代码的解决方法如下:

$(".ajax-delete").click(function(){
var url = $(this).attr('data-url');
var str="";
var ids="";
$("input[name='id']:checkbox").each(function(){
if(true == $(this).is(':checked')){
str+=$(this).val()+",";
}
});
if(str.substr(str.length-1)== ','){
ids = str.substr(0,str.length-1);
}
console.log(ids);
});

以上所述是小编给大家介绍的BootStrap iCheck插件全选与获取value值的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
vue+elementUI实现图片上传功能
Aug 20 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
js友好的时间返回函数
Aug 24 #Javascript
JS转换HTML转义符的方法
Aug 24 #Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 #Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 #Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 #Javascript
AngularJS下对数组的对比分析
Aug 24 #Javascript
AngularJS  $modal弹出框实例代码
Aug 24 #Javascript
You might like
浅析十款PHP开发框架的对比
2013/07/05 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php使用正则验证中文
2016/04/06 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
Display SQL Server Version Information
2007/06/21 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
Python简单日志处理类分享
2015/02/14 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
python中requests小技巧
2017/05/10 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
教师应聘个人求职信
2013/12/10 职场文书
读书演讲主持词
2014/03/18 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
幼儿生日活动方案
2014/08/27 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
优秀党员事迹材料
2014/12/18 职场文书
就业意向协议书
2015/01/29 职场文书
大学班干部竞选稿
2015/11/20 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB