当前位置: 首页 > news >正文

jquery iCheck插件 全选和获取value值的解决方法

在使用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'); //找到全选钮的那个input那个object
var checkboxes = $('input.check');//再获取其他选择钮的数据列表
check_select(checkAll, checkboxes) //调用该fuc

function check_select(checkAll, checkboxes){
  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');

最后代码的解决方法如下:

$("#compute_click").parent().siblings(".btn-primary").click(function(){  //选中后点击一个按钮后执行的回调函数,
  var compute_checkboxes =$("#compute_table td.check-mail input"); //获取一个html的对象列表
  select_check_action(compute_checkboxes);
});


function select_check_action(checkboxes){
  var str="";
  var ids="";
  checkboxes.each(function(index, element){
    if(true == $(element).is(':checked')){
      str+=$(element).parent().parent().siblings(".mail-ontact").text()+",";
    }
  });
  if(str.substr(str.length-1)== ','){
    ids = str.substr(0,str.length-1);
  }
  console.log(str);
  console.log(ids);
}

  

  

转载于:https://www.cnblogs.com/zhaogaolong/articles/5169330.html

相关文章:

  • Cocos2dx3.4 VS2013无法打开包括文件extensions/ExtensionExport.h解决的方法
  • 自定义控件ToggleButton滑动开关
  • 关于初高中虚拟仿真实验室解决方案
  • udp开发-dtd验证,dom解析
  • 不创建第三方变量对整型数组逆置
  • 封装一个地图中间件,愉快的切换百度地图和谷歌地图...
  • ListView的属性详解和探究
  • Javascript模块化编程(三):require.js的用法
  • 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记
  • Xms Xmx PermSize MaxPermSize 区别
  • ssh 远程登陆 refuse
  • 使用Flexible实现手淘H5页面的终端适配的注意事项
  • Installing and Using Standby Statspack in 11g
  • 美国:《网络安全国家行动计划》(2016年2月)
  • CentOS 目录结构
  • (三)从jvm层面了解线程的启动和停止
  • 【跃迁之路】【735天】程序员高效学习方法论探索系列(实验阶段492-2019.2.25)...
  • Apache Pulsar 2.1 重磅发布
  • codis proxy处理流程
  • crontab执行失败的多种原因
  • ES6核心特性
  • es6要点
  • gcc介绍及安装
  • Java-详解HashMap
  • Mac转Windows的拯救指南
  • PAT A1017 优先队列
  • vue中实现单选
  • 创建一个Struts2项目maven 方式
  • 记一次删除Git记录中的大文件的过程
  • 两列自适应布局方案整理
  • 每天10道Java面试题,跟我走,offer有!
  • 京东物流联手山西图灵打造智能供应链,让阅读更有趣 ...
  • ​马来语翻译中文去哪比较好?
  • ​用户画像从0到100的构建思路
  • #Java第九次作业--输入输出流和文件操作
  • #数学建模# 线性规划问题的Matlab求解
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • (zt)基于Facebook和Flash平台的应用架构解析
  • (阿里云万网)-域名注册购买实名流程
  • (非本人原创)我们工作到底是为了什么?​——HP大中华区总裁孙振耀退休感言(r4笔记第60天)...
  • (力扣记录)1448. 统计二叉树中好节点的数目
  • (论文阅读30/100)Convolutional Pose Machines
  • (十七)Flask之大型项目目录结构示例【二扣蓝图】
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • .mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET C# 使用 SetWindowsHookEx 监听鼠标或键盘消息以及此方法的坑
  • .NET Core 和 .NET Framework 中的 MEF2
  • .NET 材料检测系统崩溃分析
  • @31省区市高考时间表来了,祝考试成功
  • @column注解_MyBatis注解开发 -MyBatis(15)
  • @EventListener注解使用说明
  • [2021]Zookeeper getAcl命令未授权访问漏洞概述与解决
  • [2023年]-hadoop面试真题(一)
  • [AIGC codze] Kafka 的 rebalance 机制
  • [AMQP Connection 127.0.0.1:5672] An unexpected connection driver error occured