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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 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数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
python遍历数组的方法小结
2015/04/30 Python
浅谈MySQL中的触发器
2015/05/05 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python mysql中in参数化说明
2020/06/05 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
学校安全检查制度
2014/01/27 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
授权委托书格式模板
2014/04/03 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
社区重阳节活动总结
2015/03/24 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书