位置: 编程技术 - 正文

jQuery实现checkbox即点即改批量删除及中间遇到的坑

编辑:rootadmin

推荐整理分享jQuery实现checkbox即点即改批量删除及中间遇到的坑,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

最近要用jQuery实现一个批量删除操作,效果如下图

最终页面page.html,此页面使用了bootstrap和jQuery,如果没有需要下载一下

上图的操作主要需要两个操作:

一、当checkBox点击时进行选中计数(带坑)。

二、当点击批量删除时,拼接选中单位的id,传递给个后台。

初看一下,感觉这些很好实现,并且实现的方法很多。当初我也是这么认为的,结果搞了一个上午.......,接下来就看看jQuery的一些坑。

我开始想法是每次点击checkBox时,对所有的checkBox进行each()遍历,如果是勾选状态就将Num++,最后将num的值赋给批量删除的数字小标签,顺便把id也拼接了。

当这段代码触发时,却发现一个诡异的现象:这段代码会在勾选效果前先触发。类似于beforeClick(),所以当代码遍历时,无法获取当前的勾选状态。

jQuery实现checkbox即点即改批量删除及中间遇到的坑

就这个问题,我在网上找了半天答案,硬是不知道如何解决,什么mouseup()都用了一下,都是beforeClick的效果。

最后我使用了另一种写法。

  成功运行出效果!

结论:

  在click()中使用input[type=[checkbox]:checked]选择器获得勾选元素时,得到的就是勾选后的结果afterclick()。

  而使用.each()遍历时,获取的是勾选前的效果beforeclick。

  为什么一个click函数里,能得出beforeclick和aferclick两种效果?

  坑哭......

总结

以上所述是小编给大家介绍的jQuery实现checkbox即点即改批量计数及中间遇到的坑,希望对大家有所帮助,如果大家有任何疑问欢迎各我留言,小编会及时回复大家的!

JQ图片文件上传之前预览功能的简单实例(分享) 1、先准备一个divonchange触发事件inputtype="file"onchange="preview(this)"/spandivid="preview"/div2、写JS代码//上传图片之前预览图片functionpreview(file){if(file.files&&file.files

jQuery除指定区域外点击任何地方隐藏DIV功能 具体代码如下所示:$('body').click(function(e){vartarget=$(e.target);//如果#overlay或者#btn下面还有子元素,可使用//!target.is('#btn*')&&!target.is('#overlay*')if(!target.is('#bt

前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来 做项目的时候有这么一个需求,客户信息显示出来后我要搜索查找相关的客户,并把相关的客户信息全部显示出来,因为一个客户全部信息我写在一个di

标签: jQuery实现checkbox即点即改批量删除及中间遇到的坑

本文链接地址:https://www.jiuchutong.com/biancheng/370352.html 转载请保留说明!

上一篇:浅谈jquery中ajax跨域提交的时候会有2次请求的问题

下一篇:JQ图片文件上传之前预览功能的简单实例(分享)(jquery上传图片并预览)

  • 辅导期增值税一般纳税人是什么意思
  • 税收申报减免
  • 商会会费是什么意思
  • 新会计准则施行
  • 投资项目的资本金的认缴
  • 债权投资类会计账务处理
  • 结转报告中错误结转科目是什么意思
  • 票据追索权向谁追索
  • 国家税务局通用定额发票查询
  • 农林牧渔业税务优惠
  • 专票开户行信息少股份有限公司有影响吗?
  • 会计七月份忙吗
  • 当期净资产收益率怎么算
  • 资产和负债可以一增一减吗
  • 交纳经营所得的个税怎么做分录?
  • 期望和方差的计算例题
  • 公司原因领不了失业保险要赔偿吗
  • 期末留抵税额怎么做账
  • 0x000000a5蓝屏代码是什么意思
  • 华为mate50耳机孔和充电口一样吗
  • 什么情况下可以认定为工伤
  • php oci8
  • yii框架教程
  • 电脑桌面换壁纸的软件
  • 携税宝的作用
  • 定额备用金制度
  • 货款已预付会计分录
  • 企业票据贴现费怎么算
  • 苹果推送最新系统怎么关
  • dxva2.dll是什么意思
  • 营改增几个阶段
  • php如何生成html
  • html多页面
  • 文心一言中国经济大讲堂
  • 税控盘全额抵扣发票怎么勾选
  • dedecms手册
  • python一元二次方程求根
  • (WebFlux)004、WebFilter踩坑记录
  • Transactional replication(事务复制)详解之如何跳过一个事务
  • 什么叫非限定性不定方程
  • 建信融通e信通怎样转让
  • 置换房产入账价值的确定根据什么
  • 费用科目可以在借方吗
  • 未抵扣进项税额转出会计分录
  • 加计抵扣进项税分录
  • 本年收益属于什么科目
  • 便签windows
  • mac怎么用知云翻译
  • centos7 nis
  • bios中英文对照表图新版
  • win7任务管理器怎么打开
  • centos安装lvm
  • 苹果14pro max价格
  • win8系统可以装win7系统吗
  • mac的替换在哪里
  • win10h2版本
  • win8上不了网
  • opengl混合模式
  • node·js
  • android自学之路
  • 批处理常用命令总结
  • openglvbo
  • javascript怎么用
  • bootstrap基础
  • jquery解析json数据
  • unity移动ui
  • linux的ls-l命令
  • node.js express koa
  • Android Padding Margn记录
  • shell脚本的启动和关闭命令
  • js左值
  • ajax与java使用实例
  • html做一个新闻app首页
  • js动态添加trtd
  • 四川省地方税务局关于城镇土地使用税困难减免
  • 中华人民共和国成立于1949年10月1日到今年是多少周年
  • 地税公职律师招聘
  • 土地交的契税会计科目
  • 政务公开有何意义
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设