博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iCheck的全选和获取value
阅读量:6905 次
发布时间:2019-06-27

本文共 1740 字,大约阅读时间需要 5 分钟。

一、全选

在使用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 找到的解决方法:

地址是这里: 

//全选获取数值    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/

转载地址:http://vildl.baihongyu.com/

你可能感兴趣的文章
奥姆卡剃刀原理
查看>>
数据结构(C实现)------- 单链表
查看>>
ORA-28000: the account is locked-的解决办法
查看>>
大型网站架构的演化
查看>>
(笔记)电路设计(十一)之DC/DC电源转换方案设计应用
查看>>
Cannot complete the install because one or more required items could not be found
查看>>
关于使用chrome插件改动全部的站点的响应responseHeaders头的注意
查看>>
hibernate下载包中配置文件路径
查看>>
项目命名规则
查看>>
C语言 · 字符串输入输出函数
查看>>
css中单位em和rem
查看>>
C#编程(二十一)----------扩展方法
查看>>
BZOJ 2141: 排队 [CDQ分治]
查看>>
netty5入门教程
查看>>
SecureCRT 连接虚拟机Linux
查看>>
你是否也忘了刷新视图?
查看>>
C语言 · 数的划分
查看>>
C# 超高速高性能写日志 代码开源
查看>>
js-jquery-SweetAlert【二】配置方法
查看>>
反向传播公式
查看>>