jQuery实现全选按钮


Posted in jQuery onJanuary 01, 2021

本文实例为大家分享了jQuery实现全选按钮的具体代码,供大家参考,具体内容如下

jQuery实现全选按钮

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>全选练习</title>
 <script src="../js/jquery-1.8.2.min.js"></script>
 <script>
 $(function(){
 //获取全选/不全选的checkbox
 var $chooseAll= $('#chooseAll')
 //获取所有多选框并且name=items的多选框
 var $checkedAll=$(':checkbox[name=items]')
 $('#btn1').click(function(){
 //使得所有的爱好多选框都选中
 $checkedAll.prop('checked',true)
 //当所有爱好多选框都选中的时候全选框也选中
 $('#chooseAll').prop('checked',true)
 })
 $('#btn2').click(function(){
 //使得所有的爱好多选框都不选中
 $checkedAll.prop('checked',false)
 //当所有爱好多选框都不选中的时候全选框也不选中
 $('#chooseAll').prop('checked',false)
 })
 $('#btn3').click(function(){
 //进行遍历所有爱好多选框,
 $checkedAll.each(function(){
 //如果选择则为不选进行反选
  this.checked=!this.checked;
 })
 //这里对所有的爱好多选框进行过滤,过滤选中的,
 //如果全部选中就过滤掉length===0返回true,有一个没选中就返回false,
 $chooseAll.prop('checked',$checkedAll.filter(':not(:checked)').length===0)
 })
 $('#btn4').click(function(){
 //遍历输出选中就会输出对应的爱好
 $checkedAll.filter(':checked').each(function(){
  alert(this.value)
 })
 })
 $checkedAll.click(function(){
 //判断在操作爱好的时候是否全选
  $chooseAll.prop('checked',$checkedAll.filter(':not(:checked)').length===0)
 })
 $chooseAll.click(function(){
 //点击多选框的全选按钮,所的爱好都选中或者全不选中。
 $checkedAll.prop('checked',this.checked)
 })
 })
 </script>
</head>
<body>
 <form action="" method="post" id="form">
 你爱好的运动是?<input type="checkbox" name="chooseAll" id="chooseAll" />全选/全不选
 <br/>
 <input type="checkbox" name="items" id="chooseSoccer" value="足球"/>足球
 <input type="checkbox" name="items" id="chooseBasketball" value="篮球" />篮球
 <input type="checkbox" name="items" id="chooseBadminto" value="羽毛球" />羽毛球
 <input type="checkbox" name="items" id="choosePingPong" value="乒乓球" />乒乓球
 <br/>
 <input type="button" name="" id="btn1" value="全选" />
 <input type="button" name="" id="btn2" value="全不选" />
 <input type="button" name="" id="btn3" value="反选" />
 <input type="button" name="" id="btn4" value="提交" />
 </form>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery自定义组件实例详解
Dec 31 #jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 #jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 #jQuery
jQuery实现简单轮播图效果
Dec 27 #jQuery
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 #jQuery
jquery实现图片放大镜效果
Dec 23 #jQuery
You might like
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
JS实现多物体运动的方法详解
2018/01/23 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python访问系统环境变量的方法
2015/04/29 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
爱国主义教育活动总结
2014/05/07 职场文书
婚宴邀请函
2015/01/30 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Python创建SQL数据库流程逐步讲解
2022/09/23 Python