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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 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修正代码
2011/05/09 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
JS实现吸顶特效
2020/01/08 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
Python发展简史 Python来历
2019/05/14 Python
对python 调用类属性的方法详解
2019/07/02 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
现金会计岗位职责
2013/12/05 职场文书
新教师工作感言
2014/02/16 职场文书
学校消防演习方案
2014/02/19 职场文书
小学一年级学生评语
2014/04/22 职场文书
篮球社团活动总结
2014/06/27 职场文书
委托书的格式
2014/08/01 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
2014年女职工工作总结
2014/11/27 职场文书
大学生操行评语大全
2014/12/31 职场文书
高一军训决心书
2015/02/05 职场文书
大学生就业意向书
2015/05/11 职场文书
小学运动会前导词
2015/07/20 职场文书