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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 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
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python找出最小的K个数实例代码
2018/01/04 Python
python实现list由于numpy array的转换
2018/04/04 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
如何用python 操作zookeeper
2020/12/28 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
合伙经营协议书范本
2014/04/18 职场文书
在人间读书笔记
2015/06/30 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Redis 异步机制
2022/05/15 Redis
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python