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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
Node.js实现数据推送
Apr 14 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 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.MVC的模板标签系统(四)
2006/09/05 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
理解javascript正则表达式
2016/03/08 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
require.js中的define函数详解
2017/07/10 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
pandas数据集的端到端处理
2019/02/18 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
音乐教学随笔感言
2014/02/19 职场文书
一年级学生评语
2014/04/23 职场文书
2014年督导工作总结
2014/11/19 职场文书
公务员政审个人总结
2015/02/12 职场文书
送达通知书
2015/04/25 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
西游记读书笔记
2015/06/25 职场文书
企业愿景口号
2015/12/25 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python