表单复选框联动字段显示及提交错误后状态保持问题

我完全懂你遇到的糟心问题——表单提交失败后，明明PHP已经把Checkbox设为checked状态了，但对应的额外字段就是没自动显示出来。核心问题出在：你之前的逻辑只处理了Checkbox的点击交互，却没在页面加载完成时同步一次当前的Checkbox状态。下面给你几个能直接用的修复方案：

方案一：修正JS/jQuery逻辑（推荐） #

不管用jQuery还是原生JS，核心思路都是先在页面加载时执行一次状态检查，再绑定点击事件。

用jQuery实现： #

<!-- 注意：修正PHP里的拼写错误！$_POST['additonalFields'] 应该是 $_POST['additionalFields'] -->
<div class="form-group">
  <label for="additionalFields" class="checkbox-inline ml-1 mb-0">Show additional fields</label>
  <input class="align-middle" type="checkbox" name="additionalFields" value="additionalFields" id="additionalFields" 
    <?php if (isset($_POST['additionalFields'])) echo 'checked="checked"'; ?>>
</div>
<div class="form-group row" id="fields" style="display: none;">
  <div class="col-sm-6">
    <label class="form-control-label ml-1 mb-xs-form" for="fieldOne">Field 1:</label>
    <input class="form-control" type="text" id="fieldOne" name="fieldOne" maxlength="100" placeholder="Field 1" 
      <?php if ($_POST && ($suspect || $errors || !($response->success))) { echo 'value="' . htmlentities($fieldOne) . '"'; } ?>>
  </div>
  <div class="col-sm-6">
    <label class="form-control-label ml-1 mt-3 mt-sm-0" for="fieldTwo">Field 2</label>
    <input class="form-control" type="text" id="fieldTwo" name="fieldTwo" maxlength="100" placeholder="Field 2" 
      <?php if ($_POST && ($suspect || $errors || !($response->success))) { echo 'value="' . htmlentities($fieldTwo) . '"'; } ?>>
  </div>
</div>

<script>
// 封装同步字段状态的函数
function toggleAdditionalFields() {
  const isChecked = $('#additionalFields').is(':checked');
  $('#fields').toggle(isChecked);
}

// 页面加载后先执行一次，同步初始状态
$(document).ready(function() {
  toggleAdditionalFields();
  // 绑定Checkbox点击事件
  $('#additionalFields').on('click', toggleAdditionalFields);
});
</script>

用原生JavaScript实现： #

<!-- HTML结构同上 -->
<script>
const checkbox = document.getElementById('additionalFields');
const fields = document.getElementById('fields');

function toggleAdditionalFields() {
  fields.style.display = checkbox.checked ? 'flex' : 'none';
}

// DOM加载完成后同步状态，再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  toggleAdditionalFields();
  checkbox.addEventListener('change', toggleAdditionalFields);
});
</script>

方案二：修复Bootstrap data-toggle的问题 #

如果你想继续用Bootstrap的折叠组件，需要在页面加载时手动初始化状态：

<div class="form-group">
  <label for="additionalFields" class="checkbox-inline ml-1 mb-0">Show additional fields</label>
  <input class="align-middle" type="checkbox" name="additionalFields" value="additionalFields" data-toggle="collapse" data-target="#fields" 
    <?php if (isset($_POST['additionalFields'])) echo 'checked="checked"'; ?>>
</div>
<div class="form-group collapse row" id="fields">
  <!-- 额外字段内容同上 -->
</div>

<script>
$(document).ready(function() {
  const checkbox = $('input[data-target="#fields"]');
  const collapse = $('#fields');
  
  // 如果Checkbox已勾选，手动触发折叠组件显示
  if (checkbox.is(':checked')) {
    collapse.collapse('show');
  }
});
</script>

必须注意的细节 #

• 你PHP代码里有个拼写错误：$_POST['additonalFields']多打了一个字母，应该是$_POST['additionalFields']，这个错误会导致PHP判断Checkbox状态失效，一定要修正！
• 页面加载时的状态同步是核心：不管用哪种方案，都得在DOM加载完成后，根据PHP设置的checked属性来更新字段显示，不能只依赖用户的点击操作。

内容的提问来源于stack exchange，提问作者Lordkpaj