一、全选

在使用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. wamp设置自定义域名访问php网站

    wamp是一个在window系统下很不错的php开发套件,一般我都是使用此套件在本地进行开发和测试的 特别是alias功能特别好,可以同时开发N个php网站而不互相影响 但alias有一个问题,它其实 ...

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

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

  3. 循环插入oracle 存储过程

    -- Create tablecreate table STUDENTS( name VARCHAR2(300), id NUMBER(11), city VARCHAR2(300), no VARC ...

  4. Python脚本生成sitemap

    项目须要用脚本生成sitemap,中间学习了一下sitemap的格式和lxml库的使用方法.把结果记录一下,方便以后须要直接拿来用. 来自Python脚本生成sitemap 安装lxml 首先须要pi ...

  5. ZH奶酪:PHP抓取网页方法总结

    From:http://www.jb51.net/article/24343.htm 在做一些天气预报或者RSS订阅的程序时,往往需要抓取非本地文件,一般情况下都是利用php模拟浏览器的访问,通过ht ...

  6. 微信小程序 - 配置普通二维码跳小程序

    普通二维码跳小程序规则: https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#%E5%8A%9F%E8%83%B ...

  7. h5画图表

    折线: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  8. kafka文档(转)

    来自:http://www.inter12.org/archives/842 一 BROKER 的全局配置 最为核心的三个配置 broker.id.log.dir.zookeeper.connect ...

  9. Codeforces Round #234 (Div. 2) :A. Inna and Choose Options

    A. Inna and Choose Options time limit per test 1 second memory limit per test 256 megabytes input st ...

  10. iOS开发,更改状态栏(StatusBar)文字颜色为白色

    详细实现步骤 1.如图在Info.plist中进行设置,主要用于处理启动画面中状态栏(StatusBar)文字颜色. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5u ...