l-1

PHP笔记

主页/PHP笔记/PHP问答/框架Laravel/Laravel Blade：渲染动态复选框列表

Laravel Blade：渲染动态复选框列表

Bug编译狮

Bug编译狮

好的，让我们来探讨如何使用 Laravel Blade 渲染动态复选框列表。

首先，确保你已经安装了 Laravel，并且有一个基本的项目结构。接下来，我们创建一个新的控制器和视图文件来实现这个功能。

1. 创建控制器

php artisan make:controller DynamicFormController

然后，在 DynamicFormController 中添加一个方法来生成动态复选框列表：

namespace AppHttpControllers;

use IlluminateHttpRequest;

class DynamicFormController extends Controller
{
    public function index()
    {
        $options = [
            'option1' => 'Option 1',
            'option2' => 'Option 2',
            'option3' => 'Option 3',
            // 添加更多选项...
        ];

        return view('dynamic-form', compact('options'));
    }
}

2. 创建视图文件

在 resources/views 目录下创建一个新的文件 dynamic-form.blade.php：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Form</title>
</head>
<body>
    <h1>Dynamic Checkbox List</h1>

    @foreach ($options as $key => $value)
        <label for="{{ $key }}">{{ $value }}</label>
        <input type="checkbox" id="{{ $key }}" name="options[]" value="{{ $key }}">
    @endforeach
</body>
</html>

3. 配置路由

在 routes/web.php 文件中配置路由：

use AppHttpControllersDynamicFormController;

Route::get('/dynamic-form', [DynamicFormController::class, 'index']);

4. 运行应用程序

现在，你可以运行你的 Laravel 应用程序并访问 /dynamic-form 路径来查看动态复选框列表。

示例代码相关步骤

  1. 创建控制器：

    php artisan make:controller DynamicFormController

  2. 添加方法到控制器：

    namespace AppHttpControllers;

use IlluminateHttpRequest;

class DynamicFormController extends Controller
{
   public function index()
   {
       $options = [
           'option1' => 'Option 1',
           'option2' => 'Option 2',
           'option3' => 'Option 3',
           // 添加更多选项...
       ];

       return view('dynamic-form', compact('options'));
   }
}

  3. 创建视图文件：

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dynamic Form</title>
</head>
<body>
   <h1>Dynamic Checkbox List</h1>

   @foreach ($options as $key => $value)
       <label for="{{ $key }}">{{ $value }}</label>
       <input type="checkbox" id="{{ $key }}" name="options[]" value="{{ $key }}">
   @endforeach
</body>
</html>

  4. 配置路由：

    use AppHttpControllersDynamicFormController;

Route::get('/dynamic-form', [DynamicFormController::class, 'index']);

通过这些步骤，你就可以在 Laravel Blade 中成功地渲染动态复选框列表了。

黑板Bug讲师

黑板Bug讲师

介绍

Laravel Blade 是与 Laravel，一个流行的 PHP 框架捆绑在一起的模板引擎。Blade 提供了一种方便且富有表现力的方式来在视图中处理 PHP 代码。在这篇教程中，我们将专注于如何使用 Blade 渲染包含动态复选框列表的视图。

复选框是网页表单中的关键组件，允许用户进行多选。在需要捕获用户兴趣或角色的场景下，动态复选框可以发挥作用。

开始吧

在深入探讨Blade语法和动态复选框生成之前，请确保您已经有一个工作中的Laravel安装。可以使用Composer创建一个新的Laravel项目：

$ composer create-project --prefer-dist laravel/laravel checkboxApp

安装完成后，请导航到应用程序的根目录：

$ cd checkboxApp

现在让我们创建一个简单的路由、控制器和视图，以渲染我们的复选框。

基本复选框

如果你对Laravel还不熟悉，首先可以使用Artisan命令行工具创建一个控制器：

$ php artisan make:controller CheckboxController

在刚刚创建的CheckboxController.php好的，我已经为您添加了一个函数，该函数返回一个带有一些假数据的视图：checkboxes。

public function index()
{
    $interests = [
        'coding' => 'Coding',
        'music' => 'Music',
        'sports' => 'Sports',
    ];
    
    return view('checkboxes.index', compact('interests'));
}

现在，请您告诉我接下来需要我做什么？resources/views目录，创建一个checkboxes文件夹内有一份。index.blade.php文件：

对不起，我不明白您的问题，请重新描述一下您想要表达的内容。index.blade.php您会遍历兴趣列表，为每个兴趣创建一个复选框：

<form action="" method="post">
    @csrf
    @foreach ($interests as $key => $value)
        <label>
            <input type="checkbox" name="interests[]" value="{{ $key }}"> {{ $value }}
        </label>
    @endforeach
    <button type="submit">Submit</button>
</form>

预选复选框

通常，您希望根据用户偏好或其他标准预选复选框。以下是实现此功能的方法：

@foreach ($interests as $key => $value)
    <label>
        <input type="checkbox" name="interests[]" value="{{ $key }}" {{ in_array($key, $userInterests) ? 'checked' : '' }}> {{ $value }}
    </label>
@endforeach

请提供需要翻译的内容。$userInterests可以是一个从数据库中获取的用户之前选择的兴趣数组。

高级使用与模型

让我们提高一个档次，使用Eloquent模型。假设你有一个User模型和一个Interest模型。您想显示一个包含所有兴趣的复选框列表，让用户勾选自己的兴趣：

对不起，您的问题似乎没有结束。请继续。CheckboxController添加一个新方法到高级视图：

public function advancedIndex(User $user)
{
    $interests = Interest::all();
    $userInterests = $user->interests()->pluck('interests.id')->toArray();

    return view('checkboxes.advanced', compact('interests', 'userInterests'));
}

对不起，您的消息不完整。请重新发送。advanced.blade.php查看，创建复选框变为：

@foreach ($interests as $interest)
    <label>
        <input type="checkbox" name="interests[]" value="{{ $interest->id }}" {{ in_array($interest->id, $userInterests) ? 'checked' : '' }}> {{ $interest->name }}
    </label>
@endforeach

结论。

在本教程中，我们已经从动态复选框的基础概念一路讲解到利用Eloquent模型处理更高级别的情景。借助Blade的模板引擎功能，你可以轻松构建具有强大且用户友好的表单。

长工码奴1523

长工码奴1523

在 Laravel 的 Blade 模板引擎中，我们可以通过以下方法来渲染动态复选框列表：

  1. 首先，确保你已经安装了 Laravel 和 PHP，并且已经配置好了服务器环境。
  2. 创建一个新的 Laravel 项目并进入其根目录。
  3. 在项目的 resources 目录下创建一个名为 views 的新文件夹，并在里面创建一个名为 users.blade.php 的新文件。

现在，让我们编写一些代码来展示如何使用 Laravel Blade 来渲染复选框列表。

<!-- views/users.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Users List</title>
</head>
<body>
    @section('content')
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                    <tr>
                        <td>{{ $user->id }}</td>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>
                            <label>
                                <input type="checkbox" name="selected_users[]" value="{{ $user->id }}" @if(in_array($user->id, $selectedUsers)) checked @endif>
                                {{ $user->name }}
                            </label>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <button type="submit" onclick="toggleSelection()">Toggle Selection</button>

    @endsection

    @section('scripts')
        <script>
            function toggleSelection() {
                var checkboxes = document.getElementsByName('selected_users[]');
                for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked = !checkboxes[i].checked;
                }
            }
        </script>
    @endsection
</body>
</html>

在这个例子中，我们首先定义了一个表单结构，其中包含复选框和对应的用户 ID。然后，我们在模板中的 <table> 标签内部添加了一些数据。每个用户的 ID 都被存储在一个数组 $selectedUsers 中，以便在点击按钮时进行筛选。

当你运行这个页面时，你会看到一个复选框列表，你可以通过点击这些复选框来选择或取消选择它们关联的用户。当按钮被点击时，它会触发 toggleSelection() 函数，该函数遍历所有的复选框，并将它们的状态反转。

希望这对你有帮助！如果你有任何问题，请随时提问。

最新更新