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 last-child 列表最后一项的样式
Jan 22 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
Angularjs单选框相关的示例代码
Aug 17 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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 转义使用详解
2013/07/15 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
php中使用GD库做验证码
2016/03/31 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
pycharm快捷键汇总
2020/02/14 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
进修护士自我鉴定
2013/10/14 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
上课迟到检讨书
2014/02/19 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书