位置: 编程技术 - 正文

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事件的响应)

  • 不能抵扣的进项抵扣了
  • 增值税三级明细科目包括
  • 微信支付宝收入计入科目
  • 2019年小型微利企业优惠政策
  • 外经证预交税怎么算
  • 怎样填列分析资产负债表
  • 事业单位借款怎么做账
  • 纳税调整后所得怎么算
  • 土地租赁合同交不交印花税
  • 电费发票勾选是啥意思
  • 2020年外资企业
  • 金税盘忘记清卡了
  • 财政补助结转余额在借方还是贷方
  • 房地产企业人防设备计入什么科目
  • 企业的养老金根据什么扣除
  • 外贸出口支付方式
  • macbook怎么压缩视频大小
  • 怎样设置登录帐号和密码
  • 隐藏分区怎么打开
  • 为什么系统弹出登录此网络
  • 折扣促销方式
  • 跨国公司外汇资金集中
  • php实现图片上传显示
  • 已领待用物资
  • 企业所得税征收方式有哪些?
  • 建筑劳务公司的法人代表有什么责任
  • php测验
  • 演员片酬要分给经纪公司吗
  • 【深度学习时间序列预测案例】零基础入门经典深度学习时间序列预测项目实战(附代码+数据集+原理介绍)
  • js map()
  • 并发操作的定义
  • 什么是微前端
  • yum命令安装软件
  • metareg命令
  • 成本核算的五个要求
  • 交易性金融资产属于什么科目
  • 本月应付电费400元,下月支付
  • 冲红怎么做会计科目
  • sql死锁的原因及解决方法
  • 什么叫境外所得
  • 印花税申报完成如何缴纳
  • 固定资产折旧的账务处理
  • 运输服务的增值税税率到底是6还是9
  • 小额零星业务税收政策
  • SQL高级应用之同服务器上复制表到另一数据库中并实现去重复
  • 现代服务业进项抵扣新政策
  • 进项税已认证转出账务处理
  • 进项税额加计10
  • 平销返利是销售折扣吗
  • 预付卡销售成品油会计分录
  • 公司借款私人账户
  • 老板买了手机,算入什么费用
  • 合伙企业有限合伙
  • 账务处理程序的种类及各自的适用范围
  • 收到预付卡的发票是否可以报销呢?
  • 河道管理费和水利基金
  • 虚拟模块
  • 应收账款是净额列示吗
  • a公司刚刚执行了一个采购项目
  • 总分类账户和明细分类账户平行登记的要点包括
  • 会计记账的方法是如何发展的
  • mysql数据库的介绍
  • 删除了c盘文件
  • ubuntu系统安装无线网卡驱动
  • 如何设置win10系统输入法
  • windows7桌面右击
  • win10如何删除windows账户
  • win8跳过开机密码
  • es6 变量的解构赋值
  • java入门怎么学
  • 基于重大误解实施的民事法律行为
  • Android 中的 TableLayout 继承自
  • 如何使用蓝牙耳机
  • shell 输出
  • golang 和 python
  • Node.js中的全局变量有哪些
  • 用javascript写简单网页
  • Jquery中巧用Ajax的beforeSend方法
  • Python中断言语句
  • 北京地税局上班时间查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设