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 22 jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 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 获取本地IP代码
2013/06/23 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python实现处理管道的方法
2015/06/04 Python
Python循环语句之break与continue的用法
2015/10/14 Python
详解python单例模式与metaclass
2016/01/15 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python 实现端口扫描工具
2020/12/18 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
2014年村委会工作总结
2014/11/24 职场文书
荆州古城导游词
2015/02/06 职场文书
杨善洲观后感
2015/06/04 职场文书
2015年暑假生活总结
2015/07/13 职场文书
电视新闻稿
2015/07/17 职场文书