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实现前端分页功能
Mar 23 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
微信小程序获取当前位置和城市名
2019/11/13 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
vue动态设置页面title的方法实例
2020/08/23 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
质量管理标语
2014/06/12 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
销售2014年度工作总结
2014/12/08 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python