说下这里需要实现的效果:
点击反选后:
这里推荐使用原生态的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;
}
}
不要用JQuery的attr,pop,removeAttr,removePop这种,这种的有bug。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://it1995.blog.csdn.net/article/details/125987146
内容来源于网络,如有侵权,请联系作者删除!