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 相关文章推荐
jQuery的attr与prop使用介绍
Oct 10 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
Vue实现固定定位图标滑动隐藏效果
May 30 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中Date获取时间不正确怎么办
2008/06/05 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python判断正负数方式
2020/06/03 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
大家检讨书5000字
2014/02/03 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
组工干部对照检查材料
2014/08/25 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python