位置: 编程技术 - 正文

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

  • 公司代缴个人所得税做账
  • 住宿普通发票怎么做账
  • 个人所得税怎么扣除标准
  • 社保退回来的钱怎么做账
  • 股东投资的钱放在哪里
  • 两个账户往来款怎么做现金流量表
  • 物业公司可以开租赁发票吗
  • 收到赔偿怎么做账
  • 年终红包怎么入账
  • 应收账款收回时间怎么体现
  • 从国外进口的免税商品
  • 经济法基础企业所得税好难
  • 房地产企业预收账款
  • 投资款印花税的税率是多少啊
  • 定额发票2019
  • 企业应付账款管理优化方案设计
  • 以银行存款缴纳企业所得税所引起的变动为
  • 增值税有留底怎么申请退税
  • 当企业预收款项无需退回
  • 增值税发票已认证抵扣还可以进项税额转出吗
  • 企业收到银行未收到怎么做账
  • 服务费减免税会计处理
  • win8系统如何设置u盘启动
  • 驱动备份和还原工具软件有哪些
  • mac如何强制退出全屏
  • 什么是资产减值准备计提
  • 开出去的发票没有进项发票应怎么核算成本?
  • 其他业务收入不影响营业利润
  • 预售卡怎么做会计分录
  • 买材料没发票怎么办
  • 贷款损失会计处理
  • 房产税会计科目应该走税金及附加还是管理费用
  • 个人如何办理住房贷款
  • 蝴蝶兰的养殖方法和注意事项视频
  • 厂房押金不退怎么要回来
  • sklearn报错
  • ie11已经为了帮助保护您的计算机而关闭此网页
  • php框架自动加载
  • 织梦面包屑导航最后的分隔符大于号去掉方法
  • 固定资产盘亏要改变资产原值吗
  • 个人所得税进什么科目
  • 信用卡的还款方式怎么查
  • 工资不计提直接做管理费用可以吗
  • 差旅费所得税扣除标准2023
  • 企业投资期货亏损能抵税么
  • 自产的产品用于生产缴纳增值税
  • 开票需要缴纳印花税吗
  • 小规模增值税减免申报表怎么填
  • 销售做不动 应该做什么
  • 会计岗位职责风险点及防控措施
  • mysql分区是什么意思
  • mysql和c
  • Win7旗舰版系统安装
  • win8.1电脑设置在哪里
  • windows vista home basic
  • win7电脑开机声音怎么改
  • 重装系统清空
  • win10怎么设置定时关机和开机
  • ubuntu20.04命令
  • 怎么关闭xp系统弹窗
  • ExtJS4 动态生成的grid导出为excel示例
  • android开发环境的搭建步骤
  • 写一个bat文件
  • Unity3D游戏开发基础
  • js传参数有长度限制
  • Node.js中的包管理工具是什么
  • jquery给复选框赋值
  • python开发环境有
  • javascript教程推荐知乎
  • Android之SQLite
  • 删除的照片怎么还原
  • javascript:download()
  • 安卓获取图片路径
  • 纸质发票怎么查电子发票
  • 供暖配套费
  • 税务网上申报怎样操作
  • 如何申报印花税的流程
  • 三证合一的资料
  • 企业所得税年报什么时候结束
  • 经纪代理服务税率是多少 1%
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设