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 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 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
克隆一个新项目的快捷方式
2013/04/10 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
js实现右下角提示框的方法
2015/02/03 Javascript
JS中Location使用详解
2015/05/12 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
简单谈谈Python中函数的可变参数
2016/09/02 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
django queryset相加和筛选教程
2020/05/18 Python
pandas DataFrame运算的实现
2020/06/14 Python
历史学专业个人的自我评价
2013/10/13 职场文书
长辈证婚人证婚词
2014/01/09 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
学生操行评语大全
2014/04/24 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
房屋转让协议书
2014/10/18 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript