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 相关文章推荐
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
Nov 28 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
vue 实现走马灯效果
Oct 28 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
对pandas中Series的map函数详解
2018/07/25 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
学校周年庆活动方案
2014/08/22 职场文书
优秀教师单行材料
2014/12/16 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015年领班工作总结
2015/04/29 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
执行力心得体会范文
2016/01/11 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技