位置: 编程技术 - 正文

jquery实现简单的全选和反选功能(jquery简单例子)

编辑:rootadmin

推荐整理分享jquery实现简单的全选和反选功能(jquery简单例子),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery教程chm,jquery实战,使用jquery实现的项目,jquery使用教程,jquery简单例子,用jquery,jquery简单例子,jquery简单例子,内容如对您有帮助,希望把文章链接给更多的朋友!

首先我们看个简单的实例

下面再给大家分享一段基于jQuery实现checkbox列表全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的前端开发爱好者。

引入jquery库

构建HTML

一般从数据库读出来的列表都需要批量选中以便删除与编辑等,下面我们就来模拟下,实现复选框checkbox的全选与不选,先建立html

jQuery 代码

1、全选或全不选。当勾选全选按钮#selectAll旁边的复选框#all时,列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态。

jquery实现简单的全选和反选功能(jquery简单例子)

2、全选。当点击全选按钮#selectAll或者勾选全选按钮旁边的复选框#all时,列表中所有的选项都会被选中,包括全选旁边的复选框也是选中状态。

3、全不选。当点击全不选按钮#unSelect时,列表中所有的选项都是未选中状态,当然包括#all也是未选中状态。

4、反选。当点击反选按钮#reverse,列表中所有被选中的选项变为未选中状态,而所有未选中的选项变为已选中状态,当然也要注意#all的状态。

代码中遍历了选项列表,然后改变checked属性,最后调用函数allchk(),后面将介绍该函数。

5、获得选中的所有值。我们要跟后台程序交互就必须获取列表中所选项的值,我们通过遍历数组,将选中项的值存放在数组中,最后组成由逗号(,)隔开的字符串,开发者就可以通过获取这个字符串进行相应的操作了。

为了完善选中选项功能,我们在单击列表中某个选项时,如果勾选的项刚好满足全部选中的条件,则#all也要相应的变为选中状态,同样,如果事先所有的选项是选中状态时,当取消勾选某个选项时,那么#all也要相应的变为未选中状态。

函数allchk()就是用来检测全选框#all应该是选中状态还是未选中状态的,请看代码。

总结

jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置"checked"属性的值,true未选中,false为未选中,在整个全选、反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值。以下我将所有jQuery代码整理在一起,供大家参考。

理解jquery事件冒泡 一、什么是jquery事件冒泡在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者

jQuery自动完成插件completer附源码下载 我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以

jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码) 本文实例讲述了jQuery插件之jQuery.Form.js用法。分享给大家供大家参考,具体如下:一、jQuery.Form.js插件的作用是实现Ajax提交表单。方法:1.formSerilize()用

标签: jquery简单例子

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

上一篇:基于jQuery实现点击弹出层实例代码(jquery点击方法)

下一篇:理解jquery事件冒泡(jquery事件的响应)

  • 工商年报认缴时间填错了
  • 个人开票的抬头怎么写
  • 弥补以前年度亏损金额从哪里来的
  • 应税销售行为的购买方为消费者个人的可以开专票吗
  • 企业清算货币资金怎么算
  • 房地产公司拆迁部岗位职责
  • 利润表中利润总额是什么
  • 财产理赔收入怎么做账
  • 旧公司库存如何管理
  • 年终红包怎么入账
  • 土地转让增值税计税依据
  • 国税的申报表季报本月数如何填写?
  • 退免税指的是增值税还是消费税?
  • 商业保险和交强险区别
  • 出纳记账本如何手工记账
  • world超链接
  • 王者荣耀中牛魔王的技能
  • 债券投资属于什么业务
  • 怎么修改以前年度的账
  • 视同销售情形有哪些?
  • 为什么说人与人的悲欢不相通
  • php数组有哪几种类型
  • 一种简单的快乐
  • win10桌面2怎么使用
  • php使用pdo连接数据库
  • 招财树的养殖方法
  • 电脑每次开机都要按f1怎么解决
  • 专项用途财政性资金纳税调整明细表
  • 股东以非货币出资办理什么手续
  • 出口退税一般退什么税
  • 蕨菜的功效与作用及营养价值
  • 离职补贴个税计算公式
  • php中imagecreatefromjpeg
  • 简单了解航天员的生活
  • 固定资产折旧的计算方法
  • 免税的农业企业可以抵扣专票吗
  • 工业设备类型分为以下三类
  • 企业清算所得税政策
  • 开源cti
  • torch.cuda.is_available()
  • 数据结构的单链表
  • 深度学习之快速实现数据集增强的方法
  • 帝国cms安装教程
  • 宝塔怎么做?
  • 顶账用什么东西顶好
  • 长期待摊费用是什么科目
  • 软件增值税即征即退文件
  • 印花税的缴税对象是
  • 已经红冲的发票显示正常
  • 其他权益工具投资是金融资产吗
  • 收据入帐
  • 向境外支付赔偿款是否需要税务备案
  • 专利银行汇款操作步骤
  • win7系统安装包在哪个文件夹
  • 公司与公司的往来款计入什么科目
  • 企业基建工程
  • 个人对企事业单位的看法
  • 购买职工福利
  • 业务招待费能计入项目成本吗
  • 税务局收款收据
  • 内部无形资产交什么税
  • sql语句的高级用法
  • centos的版本有哪些
  • 苹果mac怎么下载英雄联盟
  • win8最多支持多大内存
  • linux中字符设备有哪些
  • 虚拟光驱安装
  • window 8
  • windows7 dns
  • three.js gui
  • perl语言
  • linux的open
  • python 解析
  • shell脚本实战
  • 隐藏应用名字
  • js中返回上一页
  • 大连税务局王局长
  • 河北省云办税厅
  • 四川企业退休人员80岁高龄补贴
  • 抄税失败是怎么回事
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设