一、全选

在使用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. VS web.config/app.conifg配置文件自定义类型使用智能感知功能

    大家使用VS编辑web.config或app.config时可以使用智能感知功能的,像下面这样很是方便 当然如果是我们自定义的类型也是可以使用智能感知的,因为智能感知的内容是来自你或其他公司(MS)提 ...

  2. Javascript常用语法 (一)

    判断成员是否是一个函数: if (typeof options.sourceMapName === 'function') { mapNameGenerator = options.sourceMap ...

  3. Python爬虫实战(三):爬网易新闻

    代码: # _*_ coding:utf-8 _*_ import urllib2 import re #import sys #reload(sys) #sys.setdefaultencoding ...

  4. Android 设计原则【转载+整理】

    原文地址 本文内容 吸引我的眼球 简化我的生活 让我眼前一亮 在使用过大量 Android APP 后,你会发现,遵循了下面这些原则的 APP 将会有更好的用户体验. 我们知道,往往国企的那些软件,都 ...

  5. PHPCMS标签

    获取栏目名:{$CAT[catname]}或{$catname}获取父栏目名:{$CATEGORYS[$CAT[parentid]][catname]} 获取同级栏目列表: {pc:content a ...

  6. Office办公 Winrar如何批量把每个文件夹分别压缩成不同的压缩包

    右击很多文件夹,添加到压缩文件,然后在文件中勾选把每个文件放到单独的压缩文件中即可  

  7. JERSEY中文翻译(第一章、Getting Started、1.1.7)

    最近发现jersey特别流行,但是中文资料非常少,深感没有资料的痛苦,所以分享一下看到的内容供他人快速入门. 今天翻译第一章.Getting Started.https://jersey.java.n ...

  8. Searching for equivalent of FileNotFoundError in Python 2

    I created a class named Options. It works fine but not not with Python 2. And I want it to work on b ...

  9. 把文件(项目)上传到Git@OSC

    说明: 登录与配置git的操作此处忽略. 假设你已配置好git,并且已绑定oschina. 下面是把一个本地文件夹上传到git的操作: 在git@osc上新建项目.记得选择添加对应的 .gitigno ...

  10. Openwrt15.05网关后pptp外拨失败的解决办法

    路由器升级openwrt chaos_calmer 15.05版后发现NAT后面的客户端外拨pptp vpn服务器失败,经google后得知,在14.07版本中默认安装的又一个叫做 kmod-ipt- ...