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()事件返回的值并添加事件的方法
Apr 15 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
jquery自适应布局的简单实例
May 28 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
ajax与jsonp的区别及用法
Oct 16 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自动给文章加关键词链接的函数代码
2012/11/29 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
Node.js学习入门
2017/01/03 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
vue实现购物车的小练习
2020/12/21 Vue.js
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python绘制简单彩虹图
2018/11/19 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
详解django2中关于时间处理策略
2019/03/06 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
工艺工程师工作职责
2013/11/23 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
英语故事演讲稿
2014/04/29 职场文书
师德承诺书
2015/01/20 职场文书
老乡会致辞
2015/07/28 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
Mysql开启外网访问
2022/05/15 MySQL