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 Ajax.ashx 高效分页实现代码
Oct 20 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jquery实现submit提交表单
Feb 03 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
JavaScript实现星级评分
Jan 12 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
php日历制作代码分享
2014/01/20 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
销售人员个人求职信
2013/09/26 职场文书
个人简历中的自我评价范例
2013/10/29 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
房屋公证委托书
2014/04/03 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
商务邀请函
2015/01/30 职场文书