位置: 编程技术 - 正文

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

  • 企业所得税是什么意思大白话
  • 小规模纳税人怎么办理
  • 一个月没有账务往来,现金日记账如何登记?
  • 银行承兑的商业汇票计入什么科目
  • 增值税何时需要交税
  • 城建税属于什么税种
  • 小规模缴纳增值税税控系统可以抵扣么
  • 国际货物运输07113
  • 房地产企业停止经营后未抵减完的预缴增值税可以退吗
  • 原始凭证丢失如何处理会罚款吗
  • 收取招标代理费会计分录
  • 小规模纳税人红字发票申报的时候怎么填
  • 合伙企业出资额不计入实收资本和资本公积 那放哪
  • 开给个人的通讯费发票能下账吗
  • 国家知识产权局商标注册
  • 应交税费个人所得税
  • 应交税费算什么费用
  • 超市积分礼品
  • 营改增对运输业的影响
  • 不含税单价怎么换成含税单价
  • 在建工程印花税计税依据
  • 怎么确认权益性投资收益收入?
  • 企业预付的固定资产折旧
  • 应收款计提
  • 工资晚发一个月个税怎么申报的
  • 企业核销应收账款需要什么资料
  • 车间废品如何做账
  • 归还法人前期垫付款项
  • window10拖动窗口的手势
  • 多发工资未退回会怎么样
  • 总账建账科目顺序
  • 为什么说人与人的悲欢不相通
  • 坏坏狼故事绘本
  • 农产品核定扣除的扣除率是多少
  • 外贸企业红字发票怎么冲
  • 企业收到分红款是免税收入吗
  • 股权转让企业所得税怎么算
  • php数组按照某个字段排序
  • 差旅费车票抵扣的相关规定
  • php执行流程
  • layui框架模板
  • 个体工商户缴税吗?
  • 金蝶本月金额公式
  • 交去年企业所得税怎么做资产负债表
  • 汇算清缴时期间费用是负数
  • 提取法定盈余公积的公式
  • python的用途
  • 增值税贷方余额是负数怎么办
  • 未使用固定资产有哪些
  • 增值税专用发票抵扣期限
  • 税控盘维护费280元怎么做账
  • 公积金由个人全部交,单位违法吗法吗
  • 设备维修费可以抵扣进项税吗
  • 投资房地产的后续计量有哪几种模式
  • 闲置资产计提折旧
  • 前程无忧是怎么收费的
  • 新准则固定资产处置的账务处理
  • 营销活动费计入成本吗
  • 存货的总账和明细账区别
  • linux oos
  • fedora怎么样
  • 预装win7系统
  • VirtualBox虚拟机免费
  • linux添加用户命令并添加管理员
  • win10系统ie浏览器版本怎么看
  • vsftpd怎么配置
  • win10更新只能暂停35天
  • win10系统如何在管理页面设置共享
  • 支持向量机
  • 安卓机怎么直播
  • android:ellipsize="marquee"
  • window.onerror()的用法与实例分析
  • api/home/getmyregion
  • unity旋转角度范围限制
  • 简述jquery的常用方法
  • 江苏国家电子税务局网站
  • 土地增值税税率表
  • 企业所得税按开票金额的多少计算税率
  • 企业所得税优惠事项管理目录2023
  • 曲靖市国家税务局人员名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设