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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
使用jQuery实现购物车
Oct 29 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
Electron 调用命令行(cmd)
2019/09/23 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
环保志愿者活动总结
2014/06/27 职场文书
525心理活动总结
2014/07/04 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
中学教师个人总结
2015/02/10 职场文书
Python OpenGL基本配置方式
2022/05/20 Python