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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 实现效果:
  • 【全选/取消按钮】点击全选后,下面的子复选框全部选中。
  • 【全选/取消按钮】点击取消全选后,下面的子复选框全部取消选中。
  • 当所有【子复选框按钮】点击选中后,【全选/取消按钮】自动勾选为选中状态。
  • 当某个【子复选框按钮】点击取消选中后,【全选/取消按钮】自动取消勾选状态。
  1. 代码:
    全选框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" id="checkall">
                                      <span class="text"></span>
                           </label>
                        </div>
                  </th>                            
              </tr>
         </thead>
         <tbody id="checklist">
         {volist name='cates' id='cate' key='k'}
         <tr>
             <td>
                 <div class="checkbox" style="text-align: center">
                     <label>
                          <input type="checkbox" value="" name="{$cate.id}[]">
                              <span class="text"></span>
                     </label>
                 </div>
             </td>
         </tr>
         {/volist}
        </tbody>
  </table>

js

<script>
//监听子复选框按钮
 $("#checklist").find(":checkbox").click(function () {
        //点击取消
        if (this.checked === false) {
            $("#checkall:first").prop('checked', false)
        }
        //点击选中
        else {
            let nocheckedList = $("#checklist").find(":checkbox:not(:checked)").length;
            if (nocheckedList === 0) {
                $("#checkall:first").prop('checked', true)
            }
        }
    });


    // 全选/取消
    $("#checkall").on('change', function () {
        let check = this.checked;
        if (check) {
            /*
            * prop() 方法设置或返回被选元素的属性和值。
            * 当该方法用于返回属性值时,则返回第一个匹配元素的值。
            * 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。
            * 根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
            * */
            $("#checklist").find(":checkbox").prop('checked', true)

        } else {
            $("#checklist").find(":checkbox").prop('checked', false)
        }
    })
</script>

参考:
[复选框] 全选、取消全选、自动勾选或取消全选按钮
jquery中attr方法和prop方法的区别

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值