实现效果：
【全选/取消按钮】点击全选后，下面的子复选框全部选中。
【全选/取消按钮】点击取消全选后，下面的子复选框全部取消选中。
当所有【子复选框按钮】点击选中后，【全选/取消按钮】自动勾选为选中状态。
当某个【子复选框按钮】点击取消选中后，【全选/取消按钮】自动取消勾选状态。
代码：
全选框ID：checkall ; 子复选框最外层的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方法的区别
