位置: 编程技术 - 正文

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拖拽功能)

  • 跨年增票能开红冲吗?
  • 承兑汇票用开发票吗
  • 特许经营权转让合同
  • 培训费的其他费用是什么
  • 高新技术认定研发费用要求
  • 一般纳税人用金蝶新建账套用什么会计制度好
  • 利润表中的其他综合收益
  • 作废的支票银行怎么处理
  • 收取车辆使用费怎么做账
  • 预提佣金会计分录是什么
  • 出口供货企业
  • 个体工商户增值税税率2023年
  • 日常管理的基本内容及方法是什么
  • 限售股转让个人所得税
  • 当月支付费用当月收到发票
  • 进口货物取得什么证书
  • 临时设施需要验收吗
  • 收到股利的现金会计分录
  • 办公费差旅费属于
  • 固定资产转投资性房地产是会计政策变更吗
  • 买股票的分红怎么拿
  • 工地开工购买的鞭炮怎么入账
  • windows hello用不了怎么办
  • 如何保护excel表格不被打开
  • 其他应收款注销数额太大
  • 电脑主板bios设置
  • PHP:mb_ereg_search_regs()的用法_mbstring函数
  • 一般纳税人购进农产品如何抵扣进项税额
  • php中class用法
  • 电脑没有声音问题
  • win11更新补丁如何删除
  • 无偿占用资金企业有哪些
  • 劳务费开发票后还需要交个税吗
  • eclipse php wamp配置教程
  • 先收票后收货
  • 金税盘显示242104
  • 农产品收购发票是普票还是专票
  • 未分配利润是负数是亏损吗
  • 增值税专用发票和普通发票的区别
  • 研发样品收入的最新规定
  • 免税的10万元是什么
  • 企业办理土地证需要哪些资料和手续
  • db2 -x
  • mongodb集群开启auth认证
  • discuz设置门户
  • 个税申报子女教育有年龄限制吗
  • 一般纳税人和小规模纳税人的区别
  • sql server如何操作
  • 分期收款开发票
  • 划拨的土地出租
  • 电子承兑汇票到期怎么兑现
  • 税金及附加和营业税金及附加是一个科目吗
  • 当月发票是否需要当月支付
  • 财务分析与财务管理的共同点
  • 企业职工充值地税怎么交
  • 工会赞助费
  • 小规模纳税人已付款对方不开发票几年了会计分录
  • 加工企业如何计税
  • 软件开发费属于研发和技术服务还是信息技术服务
  • 外经证是干什么用的
  • 数据库中经常用的函数
  • 任务栏都不见了
  • 本地硬盘满了怎么办
  • linux用户管理器在哪
  • window8.1重装系统
  • linux 运行二进制文件
  • 微软 系统设计
  • es6class类用法
  • 纯css实现轮播图
  • div +css
  • web开发手机app
  • 游戏的背包和道具系统
  • node.js redis
  • python组合运算
  • js调用url接口
  • python遍历文件目录
  • 小规模纳税人开专票可以抵扣吗
  • 建筑工程提前投入使用
  • 上海网上申报软件怎样下载
  • 太原公安分局有几个
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设