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动态创建DOM、表单元素的实现代码
Aug 09 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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
天津市收音机工业发展史
2021/03/04 无线电
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
wxPython使用系统剪切板的方法
2015/06/16 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
小学语文国培感言
2014/03/04 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书