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

实现效果：

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

代码：

全选框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>

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