个人中心
gpt4 book ai didi

Web前端笔记-批量反选CheckBox

转载 作者：知者 更新时间：2024-03-12 08:34:17 25 4
gpt4 key购买 nike

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

点击反选后：

这里推荐使用原生态的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。

25 4 0
文章推荐： Qt文档阅读笔记-Audio Example解析
文章推荐： typing‘ has no attribute ‘_SpecialForm‘
文章推荐： LeetCode_动态规划_中等_120.三角形最小路径和
文章推荐： 3步就能制作漫画头像的机器人，想拥有一个吗？
知者
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com