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 相关文章推荐
javascript object array方法使用详解
Dec 03 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
RequireJS用法简单示例
Aug 20 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 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 Ajax乱码
2008/04/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python获取糗百图片代码实例
2013/12/18 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
社区网格化管理实施方案
2014/03/21 职场文书
体育之星事迹材料
2014/05/11 职场文书
公司离职证明样本
2014/09/13 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
第二次离婚起诉书
2015/05/18 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Python jiaba库的使用详解
2021/11/23 Python