jQuery实现简单全选框


Posted in jQuery onSeptember 13, 2020

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

1.要求:

(1)实现全选框勾选时其他复选框全部选中,全选框取消勾选时其他 复选框全部取消选中
(2)当复选框有取消选中时,全选框也要取消勾选

2.HTML部分

<table id="table">
  <thead><tr><th colspan="6">学生信息表</th></tr></thead>
  <tbody>
  <tr>
   <th>
   <input type="checkbox"id="checkedAll" value="全选" />全选
   </th>
   <th>学号</th>
   <th>姓名</th>
   <th>性别</th>
   <th>年龄</th>
   <th>学分</th>
  </tr>
  <tr>
   <td>
   <input type="checkbox" name="items"/>
   </td>
   <td>1001</td>
   <td>小米</td>
   <td>男</td>
   <td>23</td>
   <td>100</td>
  </tr>
  <tr>
   <td>
   <input type="checkbox" name="items"/>
   </td>
   <td>1002</td>
   <td>小栋</td>
   <td>男</td>
   <td>23</td>
   <td>50</td>
  </tr>
  <tr>
   <td>
   <input type="checkbox" name="items"/>
   </td>
   <td>1002</td>
   <td>小栋</td>
   <td>男</td>
   <td>23</td>
   <td>50</td>
  </tr>
  </tbody>
</table>

3.css部分

<style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  table,tr,td,th{
  border: 1px solid black;
  }
  #table{
  border-collapse: collapse;
  border-spacing: none;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  }
  tr{
  height: 40px;
  }
</style>

4.jQuery部分

<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  $(function () {
  // 隔行换色效果
  $('#table tbody>tr:even').css("background","#cccccc");
  // 定义变量接收全选框与其他复选框的对象
  var $checkedAll = $("#checkedAll");
  var $items = $(":checkbox[name=items]");
  // 全选框点击事件
  $checkedAll.click(function () {
   if (this.checked) { // $(this).prop("checked")
        $items.prop('checked',true);
      } else {
        $items.prop('checked',false);
      }
  })
  // 复选框全部选中时将全选框勾选上
  $items.click(function () {
   // 当没有选中的复选框个数为0时,就是全选时刻
   if ($items.not(":checked").length===0) {
        $checkedAll.prop('checked',true);
      } else {
        $checkedAll.prop('checked',false);
      }
  })
  
  })
</script>

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

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
jquery实现简易验证插件封装
Sep 13 #jQuery
jQuery实现朋友圈查看图片
Sep 11 #jQuery
jQuery实现日历效果
Sep 11 #jQuery
jquery实现简单每周轮换的日历
Sep 10 #jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
jQuery实现简单三级联动效果
Sep 05 #jQuery
You might like
一周学会PHP(视频)Http下载
2006/12/12 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
js类 from qq
2006/11/13 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python实现xlsx文件分析详解
2018/01/02 Python
python实现装饰器、描述符
2018/02/28 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python画环形图的方法
2020/03/25 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
幼儿园教师教学反思
2014/02/06 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
优秀班主任材料
2014/12/16 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
nginx实现动静分离的方法示例
2021/11/07 Servers
SQL Server Agent 服务无法启动
2022/04/20 SQL Server