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.form.js异步提交表单详解
Apr 25 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery编写QQ简易聊天框
Aug 27 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python实现学生成绩管理系统
2020/04/05 Python
在Python中COM口的调用方法
2019/07/03 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
优秀学生事迹材料
2014/02/08 职场文书
继承公证书
2014/04/09 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
租房协议书范例
2014/10/14 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL