位置: 编程技术 - 正文

jquery中checkbox使用方法简单实例演示

编辑:rootadmin

推荐整理分享jquery中checkbox使用方法简单实例演示,希望有所帮助,仅作参考,欢迎阅读内容。

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

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

引入jquery库<script src="ajax/libs/jquery/1..2/jquery.min.js"></script>构建HTML

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

jQuery 代码

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

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

jquery中checkbox使用方法简单实例演示

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

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

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

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

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

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

总结

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

通过本文希望大家对jquery中checkbox的使用方法有个大概的认识,再通过大量实例熟练掌握checkbox使用方法。

jquery利用拖拽方式在图片上添加热链接 本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考。具体如下:运行效果截图如下:项目的需求,要在一张图

jQuery实现宽屏图片轮播实例教程 本文实例讲述了jQuery实现宽屏图片轮播实例教程。分享给大家供大家参考。具体如下:运行效果截图如下:引入jquery库scriptsrc="js/jquery-1.9.1.min.js"type="text

Jquery-1.9.1源码分析系列(十一)之DOM操作 DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。DOM操作函数中后五种方法

标签: jquery中checkbox使用方法简单实例演示

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

上一篇:基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)(jquery教程w3c)

下一篇:jquery利用拖拽方式在图片上添加热链接(jquery拖拽功能)

  • 小型微利企业的从业人数和资产总额
  • 增值税进项税会计处理
  • 简易计税方法使用范围
  • 所得税申报是什么
  • 外购免税农产品进项税额如何抵扣
  • 利润表季度怎么填写
  • 加计扣除声明在哪里签章有效
  • 项目部电缆属于固定资产吗
  • 个人独资企业转个体户怎么办理
  • pos机手续费开什么发票啊
  • 计提存货跌价准备是递延所得税资产吗
  • 变更税务登记证需要提供哪些材料
  • 外汇结款怎么办理
  • 新公司核税需要什么资料
  • 固定资产如何抵扣企业所得税
  • 固定资产增值税可以一次性抵扣吗
  • 公司购买的绿植普票怎么抵扣
  • 注册资本没有缴足前贷款利息
  • 员工的家庭
  • 不动产抵扣涉及净值,这里的净值是否扣除减值准备,是否扣除不动产改变用途当月的折旧额?
  • 工会经费由谁审批
  • 增值税更正申报表需要逐月更正吗
  • 汇票贴息会计分录
  • 超出标准的公积金怎么交
  • 企业管理可以开什么明细发票
  • 外购产品检验流程
  • 公司清算实收资本是零吗
  • 公司增加注册资金需要实缴吗
  • 工商年报人数是12月人数吗
  • 自然人独资企业交什么税
  • 评估增值的账务处理
  • 天猫魔投安装教程
  • 电脑文件启用宏是什么意思
  • php循环语句
  • 商业一般纳税人标准
  • 财产保险公司手续费税前扣除最新
  • html5新增的标签元素有哪些
  • vscode插件vuter
  • vue3官方教程
  • vue实现动态菜单权限配置
  • 定额发票和增值税发票
  • viite
  • 十年磨一剑的下一句幽默
  • 织梦如何添加浮动广告
  • 织梦标签理解
  • 一般纳税人会计做账的基本流程
  • sqlserver存储过程if语句
  • 固定资产税会折扣吗
  • 永久性差异有哪些项目
  • 不用交社保的几种情况
  • 水电费的收据单怎么写
  • 标书费没有发票合理吗
  • 研发费用固定资产如何入账
  • 国有土地使用权是什么意思
  • 运费发票抵扣要求
  • 仪器校准费用会计科目
  • 增值税普通发票和电子普通发票的区别
  • 上年多计提的费用,今年如何记账
  • 境外情况
  • 发票 抬头个人
  • 自制半成品销售方案
  • 企业如何计算增值税
  • 旅游饮食服务业会计课后答案
  • linux怎么分盘
  • win10 20h2怎么装
  • 时间服务器ip 端口
  • linux内核命名
  • win7到欢迎界面卡半天
  • win8 开机
  • 冰球撞人犯规吗
  • linux的启动顺序
  • linux中mysql备份shell脚本代码
  • 抽象类和接口的区别简答题
  • vue2.0与bootstrap3实现列表分页效果
  • JavaScript中的数据类型分为两大类
  • javascript如何学
  • python3.5升级
  • 如何查看税务登记记号
  • 登录上海电子税务局单位社保查询不到当月未交的
  • 单位纳税人什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设