位置: 编程技术 - 正文

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

  • 车辆购置税怎么交网上缴费
  • 销售原材料给供应商
  • 利息税减少
  • 子公司分红母公司要不要交税
  • 申报个税提前一个月有什么影响
  • 维修企业主营项目有哪些
  • 当月报废生产设备一台,原价80万元
  • 年度纳税申报时间规定
  • 营改增后征收增值税的税目
  • 增资的印花税纳税义务时间
  • 投资收益所得税税前扣除
  • 最新增值税申报实操
  • 计提本月工资记账凭证怎么填
  • 增值税小规模申报表
  • 收料单的会计分录怎么做
  • win10蓝牙驱动程序下载
  • linux网络设置在哪里
  • 电脑开机需要按ctrl+alt+del怎么取消
  • PHP:mb_regex_encoding()的用法_mbstring函数
  • 利息收入结转的正确分录
  • 进销存单据
  • 采购涉及哪些部门
  • 公司固定资产一般谁负责
  • PHP:preg_last_error()的用法_PCRE正则函数
  • php occ
  • php 读取文本文件
  • php教程100
  • 购买性支出和转移性支出的本质区别
  • 老板垫付的货款会计分录
  • 增值税发票与实际差异五毛钱
  • 个体工商户筹集资金的难易程度
  • php冒泡法排序
  • 差旅费报销应注意什么
  • php强大吗
  • PHP中spl_autoload_register()函数用法实例详解
  • python 二值化
  • 计入固定资产的条件
  • 其他收益在利润表填在哪里
  • 预缴增值税附加税
  • mongodb分区分片
  • 递延收益与预收收益区别
  • 预付款 退
  • 子公司注销合并报表少数股东权益的处理
  • 二手车没有发票能上牌吗
  • 办理食品经营许可证需要什么条件
  • 印花税计入相关资产成本吗
  • 网银费用及回单怎么查
  • 年终奖个税计税方式
  • 土地价款抵减销项税
  • 专用发票冲红有时间有时间限制吗
  • 金蝶计价方法在哪里
  • 金税盘离线开票时间超限的处理方法
  • 不能收回的应收账款
  • 怎么样打印自己想要的内容
  • 其他流动资产为什么包括应交增值税
  • 小企业会计准则主要按照什么计量
  • 融资租赁怎么开收据
  • MySQL主从同步原理介绍
  • VMware虚拟机中安装MATE桌面环境
  • page文档的排版技巧
  • 判断自己的脸型
  • windows z
  • ubuntu服务器命令
  • win8 网络连接
  • 微软开始推送win10
  • win7升级到win10有无影响
  • linux怎么添加一个用户
  • 什么是批处理模式
  • 使用linux的收获心得
  • js鼠标点击事件监听
  • node.js怎么用
  • 浅谈python中的实例方法、类方法和静态方法
  • bootstrap按钮图标
  • unity shooter
  • unity接入google内购
  • jquery中有几种方法可以来设置和获取样式
  • python单链表输出1到10
  • 日历 caldav
  • 电子税务局电子送达文书怎么签收
  • 什么是增值税免抵税额
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设