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中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP7匿名类用法分析
2016/09/26 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
python调用java的Webservice示例
2014/03/10 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
python实现贪吃蛇小游戏
2020/03/21 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
详解python中各种文件打开模式
2020/01/19 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
机电系毕业生求职信
2014/07/11 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript