一、全选

在使用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);
});

延伸:

1.判断已选中的个数/长度

var len = $("input[name='id']:checkbox").length;

三、radio

问题: 同时可选中多个值

解决: 设置同一范围内的选项的name一致,原因是由于个别选项单独处理而没有设置name

来自:http://www.tuicool.com/articles/aANRBv

官网:http://www.bootcss.com/p/icheck/

iCheck的全选和获取value的更多相关文章

  1. BootStrap iCheck插件全选与获取value值的解决方法

    这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题 ...

  2. jquery iCheck的全选和获取value

    jQuery iCheck 插件提供高度可定制的复选框和单选按钮(jQuery和Zepto).最新版本1.0.2,有个最新的2.0预览版,但是发布之后没有再更新. 特点:在不同的浏览器和设备(桌面和移 ...

  3. JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CheckBox复选框全选以及获取值

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. jquery1.11 操作checkbox:全选、取消全选、获取选择元素、获取取消选择元素(总结)

    jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE h ...

  6. Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据

    关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...

  7. JavaScript实现表单的全选,反选,获取值

    构思 通过for循环和for in循环来实现,界面效果如下 步骤 全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...

  8. 全选,反选,获取值ajax提交

    //必须先加载jquery //加载 弹出框插件 artdialog http://www.planeart.cn/demo/artDialog/ /****全选反选*开始**/ $(document ...

  9. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

随机推荐

  1. rabbitmq页面出现/etc/rabbitmq/rabbitmq.config(not found)解决方法

    如果出现页面出现/etc/rabbitmq/rabbitmq.config(not found) 解决如下:find / -name "rabbitmq.config.example&quo ...

  2. C++ 容器元素的存储和获取

    1.存储对象,存储的是对象的副本,并不是原对象.2.获取对象,获取的是对象的引用,为什么要这样设计?a.存储对象只发生一次,而获取对象往往会有多次,获取对象,如果每次都返回对象的副本,这个开销很大.b ...

  3. linux 文件系统与磁盘修复

    fsck修复受损的文件系统   Linux不正常关机,有时候再次启动时会报文件系统损坏,如何修复文件? 首先会让你输入root用户的密码.  1)出错的时候如果告诉你是哪一块硬盘的分区有问题,比如是/ ...

  4. 微信小程序 - scroll-into-view(提示)

    scroll-view的参数scroll-into-view适用于索引以及回到顶部 .详情见官方文档scroll-view: 点击下载:scroll-into-view示例

  5. Python取得系统进程列表

    一.上代码 import psutil for proc in psutil.process_iter(): try: pinfo = proc.as_dict(attrs=['pid', 'name ...

  6. Centos7中安装Docker

    1.配置docker镜像安装源 tee /etc/yum.repos.d/docker.repo <<-'EOF' [dockerrepo] name=Docker Repository ...

  7. tshark使用说明

    tshark -h TShark (Wireshark) (v2.-gf42a0d2b6c) Dump and analyze network traffic. See https://www.wir ...

  8. python在linux的报错集锦

    1. 报错提示 /usr/lib/python2.7/site-packages/requests/__init__.py:80: RequestsDependencyWarning: urllib3 ...

  9. cocos2d-js 各浏览器上的表现

    其实这里只简单对比3个浏览器,估计也足够代表性了. 结论是: 1.有webgl支持的时候,就可以尽情的耍吧: 2.没有webgl,能native就native.如果不行,就只能在canvas上做小块的 ...

  10. 【DB2】delete大表不记录日志的正确操作

    一.原始方法 在删除大表的时候,经常会由于数据量太大,造成日志文件满了,接着无法删除数据. 以下是删除大表不记录日志的具体步骤: 1.临时设置自动提交关闭 (使用命令db2 list command ...