本文介绍在 laravel 表单中，使用 jquery 动态控制字段显隐的完整实现方案：当用户勾选“是否显示按钮”复选框时，立即显示对应的按钮文案与链接输入框，反之则隐藏，全程无需提交表单。
本文介绍在 laravel 表单中，使用 jquery 动态控制字段显隐的完整实现方案：当用户勾选“是否显示按钮”复选框时，立即显示对应的按钮文案与链接输入框，反之则隐藏，全程无需提交表单。
在 Laravel 前端开发中，常需根据用户交互（如勾选复选框）动态展示关联表单区域，以提升用户体验与表单逻辑清晰度。本例中，目标是：仅当用户勾选 is_have_button 复选框时，才显示「按钮标签」和「按钮链接」两个输入字段；未勾选时自动隐藏，且所有操作均在前端实时完成，不触发页面刷新或表单提交。
✅ 正确实现步骤
首先，将需要条件显示的字段包裹在一个具有唯一标识的容器中（如 <div id="button-fields">），而非直接操作整个 <code><form></form>（原答案中 $("form").show() 会误显/隐藏全部表单，不符合题意）：
<!-- 在表单内，checkbox 下方添加如下结构 -->
<div class="form-group">
<input type="checkbox" name="is_have_button" id="toggle-button-fields" value="1"><label>{{ __('landingPage.haveButton') }}</label>
</div>
<!-- 条件显示的按钮字段组（默认隐藏） -->
<div id="button-fields" style="display: none;">
<div class="form-group">
<label>{{ __('landingPage.buttonTag') }}</label>
<input type="text" name="button_attribute[tag]" class="form-control" value="{{ old('button_attribute[tag]') }}">
</div>
<div class="form-group">
<label>{{ __('landingPage.buttonLink') }}</label>
<input type="text" name="button_attribute[href]" class="form-control" value="{{ old('button_attribute[href]') }}">
</div>
</div>
然后，在 @section('script') 中编写精准的 jQuery 控制逻辑：
@section('script')
<script type="text/javascript">
$(document).ready(function() {
const $checkbox = $('#toggle-button-fields');
const $buttonFields = $('#button-fields');
// 初始化：根据 checkbox 初始状态设置显隐（支持编辑页回显）
if ($checkbox.is(':checked')) {
$buttonFields.show();
} else {
$buttonFields.hide();
}
// 监听勾选变化
$checkbox.on('change', function() {
if ($(this).is(':checked')) {
$buttonFields.slideDown(200); // 带淡入动画更友好
} else {
$buttonFields.slideUp(200);
}
});
});
</script>
@endsection
⚠️ 关键注意事项
-
避免作用域污染：务必为 checkbox 和目标容器添加
id（如#toggle-button-fields、#button-fields），防止多复选框场景下逻辑错乱； -
兼容旧数据回显：
$(document).ready()内需检查初始checked状态，确保从编辑页返回或old()数据存在时，界面状态与实际值一致； -
用户体验优化：使用
.slideDown()/.slideUp()替代.show()/.hide()，提供平滑过渡效果； -
Laravel CSRF 安全性不受影响：该方案纯前端控制，所有字段仍位于同一
<form></form>内，提交时@csrf及验证逻辑完全保留； -
无障碍友好：可额外添加
aria-expanded属性同步状态，供屏幕阅读器识别（进阶需求）。
✅ 最终效果
- 用户勾选「是否显示按钮」→ 按钮相关字段平滑展开，可立即填写；
- 取消勾选 → 字段收起，且其
input值在提交时自动被忽略（因 DOM 已隐藏，但注意：若需服务端强校验，应在 Controller 中判断is_have_button是否为1再验证button_attribute）； - 全程无跳转、无刷新、无额外请求，符合现代单页交互体验标准。
此方案轻量、可靠、可复用，适用于 Laravel + jQuery 的任意条件表单场景。
