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 相关文章推荐
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现视频展示效果
May 30 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php数组的概述及分类与声明代码演示
2013/02/26 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
javascript 写类方式之一
2009/07/05 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
javascript验证身份证号
2015/03/03 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
easyui validatebox验证
2016/04/29 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python项目跨域问题解决方案
2020/06/22 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
计算机个人求职信范例
2014/01/24 职场文书
小学生操行评语
2014/04/22 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
模范教师事迹材料
2014/12/16 职场文书
财务出纳岗位职责
2015/03/31 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
中学语文教学反思
2016/02/16 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android