在table中设置单选、复选框，如何实现一键全选、当单选框全部勾选后全选框自动勾上以及再次点击全选后单选框取消勾选（反选）

<table class="mui-table mui-table-view-striped" style="text-align: center;">
<thead style="background: dodgerblue;color: white; height: 40px;">
<tr>
						<!-- <span>全选</span> -->
<th style="width: 5%;" class="allCheck"><input type="checkbox" id="checkAll">
			</th>
			<th style="width: 30%;">物料</th>
			<th style="width: 30%;">物料名称</th>
			<th style="width: 30%;">插位</th>
			<th style="width: 5%;">数量</th>
</tr>
</thead>
<tbody class="ui-jqgrid-btable" id="tbody">
<tr>
	<td><input type="checkbox" name="check" class="ck"></td>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
	</tr>
	<tr>
	<td><input type="checkbox" name="check" class="ck"></td>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	<td>8</td>
	</tr>
	</tbody>
	</table>

JS实现方法如下：

//获取选择框的状态
			const checkAll=document.querySelector('#checkAll')
			const cks=document.querySelectorAll('.ck')
			console.log(cks.length)
			checkAll.addEventListener('click',function(){
				
				for(let i=0;i<cks.length;i++){
					cks[i].checked=checkAll.checked
				}
			})

//小选项框中判断个数，全部选中时则全选按钮也被选中
			for(let i=0;i<cks.length;i++){
				const n=0
				cks[i].addEventListener('click',function(){
					const checkedNum=document.querySelectorAll('.ck:checked').length
					checkAll.checked=checkedNum===cks.length
				})
			}			

效果图如下：