實(shí)現(xiàn)效果：

【全選/取消按鈕】點(diǎn)擊全選后，下面的子復(fù)選框全部選中。
【全選/取消按鈕】點(diǎn)擊取消全選后，下面的子復(fù)選框全部取消選中。
當(dāng)所有【子復(fù)選框按鈕】點(diǎn)擊選中后，【全選/取消按鈕】自動(dòng)勾選為選中狀態(tài)。
當(dāng)某個(gè)【子復(fù)選框按鈕】點(diǎn)擊取消選中后，【全選/取消按鈕】自動(dòng)取消勾選狀態(tài)。

代碼：

全選框ID：checkall ; 子復(fù)選框最外層的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>
//監(jiān)聽(tīng)子復(fù)選框按鈕
 $("#checklist").find(":checkbox").click(function () {
        //點(diǎn)擊取消
        if (this.checked === false) {
            $("#checkall:first").prop('checked', false)
        }
        //點(diǎn)擊選中
        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() 方法設(shè)置或返回被選元素的屬性和值。
            * 當(dāng)該方法用于返回屬性值時(shí)，則返回第一個(gè)匹配元素的值。
            * 當(dāng)該方法用于設(shè)置屬性值時(shí)，則為匹配元素集合設(shè)置一個(gè)或多個(gè)屬性/值對(duì)。
            * 根據(jù)官方的建議：具有 true 和 false 兩個(gè)屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
            * */
            $("#checklist").find(":checkbox").prop('checked', true)

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

參考：
Karagrade
Karagrade的參考：
[復(fù)選框] 全選、取消全選、自動(dòng)勾選或取消全選按鈕
jquery中attr方法和prop方法的區(qū)別