Laravel Blade 模板中实现单选按钮选中状态保持

本文旨在讲解如何在 Laravel Blade 模板中实现单选按钮的选中状态保持，即在表单提交后，能够记住用户上次选择的选项，避免重置为默认值。我们将通过 old() 方法结合 Blade 模板语法，实现这一功能，提升用户体验。

实现单选按钮选中状态保持

在 Laravel 中，old() 函数用于在表单提交后，获取上一次提交的表单数据。我们可以利用这个函数，结合 Blade 模板的条件判断，来动态设置单选按钮的 checked 属性。

以下是一个示例：

<label for="no" class="col form-check-label">No</label>
<input type="radio" name="visualCheck" value="no" id="no" class="col p-0 m-0" style="display:inline-block;vertical-align:middle;" @if(old('visualCheck') == 'no') checked @endif />

<label for="yes" class="col form-check-label">Yes</label>
<input type="radio" name="visualCheck" value="yes" id="yes" class="col" style="display:inline-block;vertical-align:middle;" @if(old('visualCheck') == 'yes') checked @endif />

代码解释：

• name="visualCheck"：所有单选按钮必须具有相同的 name 属性，以便将它们视为同一组选项。
• value="no" 和 value="yes"：每个单选按钮都有一个唯一的 value 属性，用于标识该选项的值。
• @if(old('visualCheck') == 'no') checked @endif：这是一个 Blade 模板的条件判断语句。它检查 old('visualCheck') 函数的返回值是否等于 'no'。如果相等，则将 checked 属性添加到该单选按钮。
• @if(old('visualCheck') == 'yes') checked @endif：同理，这个条件判断语句检查 old('visualCheck') 函数的返回值是否等于 'yes'，并相应地添加 checked 属性。

工作原理：

1. 当用户首次访问包含这些单选按钮的表单时，old('visualCheck') 函数返回 null，因此没有任何单选按钮会被选中（除非你在 HTML 中设置了默认的 checked 属性）。
2. 用户选择一个选项并提交表单。
3. 如果表单验证失败或其他原因导致页面重新加载，Laravel 会将用户提交的数据存储在 session 中。
4. old('visualCheck') 函数现在会返回用户上次提交的 visualCheck 的值。
5. Blade 模板的条件判断语句会根据 old('visualCheck') 的值，动态地将 checked 属性添加到相应的单选按钮，从而保持用户的选择。

更简洁的写法：

可以采用三元运算符，使代码更简洁：

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

<input type="radio" name="visualCheck" id="no" class="col p-0 m-0" style="display:inline-block;vertical-align:middle;" value="no" {{ old('visualCheck') == "no" ? 'checked' : '' }} />
<input type="radio" name="visualCheck" id="yes" class="col" style="display:inline-block;vertical-align:middle;" value="yes" {{ old('visualCheck') == "yes" ? 'checked' : '' }} />

注意事项：

• 确保在你的控制器中，当表单验证失败或其他情况需要返回视图时，使用 withInput() 方法将表单数据传递给视图。例如：

  return redirect()->back()->withInput();

  登录后复制

• 如果需要设置默认选中的单选按钮，可以在 HTML 中添加 checked 属性，但要注意，只有在 old('visualCheck') 函数返回 null 时，才会显示默认选中的选项。

总结：

通过结合 old() 函数和 Blade 模板的条件判断，可以轻松地实现单选按钮选中状态的保持，从而提升用户体验。这种方法简单有效，适用于各种 Laravel 项目。

以上就是Laravel Blade 模板中实现单选按钮选中状态保持的详细内容，更多请关注php中文网其它相关文章！