php - 复选框选择所有复选框 Laravel
问题描述
这是我的问题:
在 PHP Laravel 中,我有一个 foreach 循环,它在屏幕上显示消息,包括一个复选框。每条消息都有自己的复选框。我在所有消息的顶部还有一个复选框。我想为该复选框分配一个功能以检查所有复选框。我知道过去曾有人问过这个问题,但不幸的是,这些答案对我不起作用。有人对我有解决方案吗?
我正在使用:Laravel、Inspinia、Bootstrap 4
提前致谢!
这是我的代码:
@if(count($messages) > 0)
<table class="table table-hover">
<thead>
<tr>
<th> </th>
//select all checkboxes
<th><input type="checkbox" class=""/></th>
<th>@sortablelink('title', trans('messages.title'))</th>
<th>@sortablelink('sender_user_id', trans('messages.sender'))</th>
<th class="d-none d-sm-table-cell">@sortablelink('created_at', trans('messages.sent_at'))</th>
</tr>
</thead>
<tbody>
@foreach ($messages as $message)
<tr id="messagesTable">
<td><i class="{{ $message->read ? 'far fa-envelope-open' : 'fas fa-envelope' }}"></i></td>
//the checkboxes who need to be selected
<td class="project-title">
<div class="checkbox p1-1">
<input type="checkbox" id="message_{{$message->id}}" name="message" value="{{$message->id}}">
<label for="message_{{$message->id}}"></label>
</div>
</td>
<td class="project-title">
<a href="{{ route('messages.read', [$message->id]) }}">{{$message->title}}</a>
</td>
<td class="project-title">
<a href="{{ route('messages.read', [$message->id]) }}">{{ $message->sender ? $message->sender->name : ''}}</a>
</td>
<td class="project-title d-none d-sm-table-cell">
<a href="{{ route('messages.read', [$message->id]) }}">{{$message->created_at->format('d-m-Y H:i')}}</a>
</td>
</tr>
@endforeach
</tbody>
</table>
@endif
解决方案
你可以做到jquery
第一步
改变这个
//select all checkboxes
<th><input type="checkbox" class=""/></th>
对此
//select all checkboxes
<th><input type="checkbox" class="check_all"/></th> //just added a class to this element
第二步
将 class_name 添加到所有<input type="checkbox">
我的意思<input type="checkbox" id="message_{{$message->id}}" name="message" value="{{$message->id}}">
更改为<input type="checkbox" id="message_{{$message->id}}" name="message" value="{{$message->id}}" class="custom_name">
笔记: be sure that all your checkboxes has one class_name instead the one witch if we click it others checked!
第三步
在页脚中添加这个
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
$(".check_all").on("click", function(){
$(".custom_name").each(function(){
$(this).attr("checked", true);
});
});
</script>
我 HPOE 这对你有用……
推荐阅读
- javascript - 如何使用 javascript 解析值?
- spring - 如何从外部文件加载spring data jpa的数据库配置?
- javascript - 如何将html代码添加到功能节点NODERED
- flutter - Flutter:如何在 webview 中获得 ajax 响应?
- redirect - pfsense haproxy 重定向不匹配到 url
- javascript - 使用 html 和 js 使用用户输入创建计时器
- arrays - 选择数组元素以使它们的总和大于数字 K 的方法数
- docker - 如何使用 GCE 中的容器优化映像创建不属于 root 的绑定挂载
- python - 类型映射资源并将列表转换为矢量(和返回)
- ios - 从图库 iOS 13 中选择图像时缺少 GPSTimeStamp 和 GPSDateStamp