Web前端笔记-批量反选CheckBox- 前端开发

说下这里需要实现的效果：

点击反选后：

这里推荐使用原生态的JS来搞，用Jquery（3.6版本）会有问题。

首先需要把每个CheckBox都设置好名字：


<table class="table text-center table-striped">
<thead class="thead-dark">
	<tr>
		<th><a class="text-white" href="#" onclick="invertSelection()">反选</a></th>
		<th>创建时间</th>
		<th>ID</th>
		<th>标题</th>
		<th>标签</th>
		<th>作者</th>
		<th>修改时间</th>
		<th>操作</th>
	</tr>
</thead>
<tbody>
	@foreach($article as $item)
		<tr>
			<td><input name="checkSelect" type="checkbox" id="checkSelect{{$item->id}}"></td>
			<td>{{$item->created_at}}</td>
			<td>{{$item->id}}</td>
			<td>{{$item->title}}</td>
			<td>标签</td>
			<td>站长</td>
			<td>{{$item->updated_at}}</td>
			<td>
				<a class="btn-sm btn-success text-white" href="{{route('noticeShow', ['id' => $item->id])}}">查看</a>
				<a class="btn-sm btn-primary text-white" href="{{route('noticeEdit', ['id' => $item->id])}}">编辑</a>
				<a class="btn-sm btn-danger text-white" href="{{route('noticeDelete', ['id' => $item->id])}}">删除</a>
			</td>
		</tr>
	@endforeach
</tbody>

使用原生态的JS去干：


function invertSelection(){
 
    let checkSelect = document.getElementsByName("checkSelect");
    for(let i= 0;i < checkSelect.length; i++){
 
        checkSelect[i].checked = !checkSelect[i].checked;
    }
}