jquery实现[复选框] 全选、取消全选、自动勾选或取消全选按钮

最新推荐文章于 2024-08-14 11:55:10 发布

Karagrade

最新推荐文章于 2024-08-14 11:55:10 发布

阅读量6.3k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/coco1118/article/details/93861642

版权

该博客介绍了如何使用jQuery实现复选框的全选、取消全选功能，并详细说明了当所有子复选框被选中或取消选中时，全选按钮如何自动切换状态。文中提供了相关HTML和JS代码示例，并提到了jQuery中attr与prop方法的区别。

摘要由CSDN通过智能技术生成

实现效果：

【全选/取消按钮】点击全选后，下面的子复选框全部选中。
【全选/取消按钮】点击取消全选后，下面的子复选框全部取消选中。
当所有【子复选框按钮】点击选中后，【全选/取消按钮】自动勾选为选中状态。
当某个【子复选框按钮】点击取消选中后，【全选/取消按钮】自动取消勾选状态。

代码：
全选框ID：all ; 子复选框最外层的ID 为：chekclist

html

   <table class="table table-bordered table-hover">
         <thead class="">
             <tr>
                 <th style="width: 50px;">
                       <div class="checkbox" style="text-align: center">
                          <label>
                               <input type="checkbox"</