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

本文旨在解决在使用 Laravel Blade 模板时，如何正确地保持单选按钮的选中状态，特别是在表单提交后，能够记住用户之前的选择，而不是恢复到默认状态。通过示例代码和详细解释，帮助开发者理解 old() 函数的正确用法，并避免常见的错误。

在 Laravel 中，old() 函数是一个非常有用的工具，它允许你在表单提交后，重新填充表单字段的值。这对于保持用户输入的数据，尤其是在验证失败后，至关重要。对于单选按钮，正确使用 old() 函数可以确保用户之前的选择在页面重新加载后仍然被选中。

基本用法

假设你有一个名为 visualCheck 的单选按钮组，包含 “yes” 和 “no” 两个选项。以下是如何使用 old() 函数来保持选中状态的示例：

<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" @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" @if(old('visualCheck') == 'yes') checked @endif />

在这个例子中，@if(old(‘visualCheck’) == ‘no’) checked @endif 和 @if(old(‘visualCheck’) == ‘yes’) checked @endif 分别检查 old(‘visualCheck’) 的值是否等于 “no” 或 “yes”。如果相等，则添加 checked 属性。

更简洁的写法

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

<input type="radio" name="visualCheck" value="no" id="no" {{ old('visualCheck') == 'no' ? 'checked' : '' }} />
<input type="radio" name="visualCheck" value="yes" id="yes" {{ old('visualCheck') == 'yes' ? 'checked' : '' }} />

这种写法与上面的例子效果相同，但代码更短更易读。

注意事项

• 确保 name 属性相同： 所有属于同一个单选按钮组的 input 标签必须具有相同的 name 属性（例如，visualCheck）。
• 检查 value 属性： old() 函数返回的值与 value 属性进行比较，所以确保 value 属性设置正确。
• old() 函数的可用性： old() 函数只有在表单提交后，并且会话中存在旧数据时才可用。通常，这发生在表单验证失败后，Laravel 会自动将旧数据存储到会话中。
• 默认选中项： 如果没有任何选项被选中（例如，首次加载页面），你可能需要设置一个默认的选中项。这可以通过简单地在其中一个 input 标签中添加 checked 属性来实现，但要注意，只有在 old(‘visualCheck’) 为空时才应该这样做，以避免覆盖用户之前的选择。

示例：包含默认选中项

<input type="radio" name="visualCheck" value="no" id="no" {{ old('visualCheck') == 'no' ? 'checked' : '' }} checked />
<input type="radio" name="visualCheck" value="yes" id="yes" {{ old('visualCheck') == 'yes' ? 'checked' : '' }} />

在这个例子中，”no” 选项默认被选中，但如果用户提交了表单并选择了 “yes”，那么在页面重新加载后，”yes” 选项将被选中。 如果希望初始状态没有默认选中项，可以不设置 checked 属性，或者使用 JavaScript 控制。

总结

通过正确使用 old() 函数，可以轻松地在 Laravel Blade 模板中保持单选按钮的选中状态。确保 name 属性相同，检查 value 属性，并注意 old() 函数的可用性。 通过上述方法，你可以为用户提供更好的表单体验，减少重复输入，提高用户满意度。