表单保存后Checkbox无法保持选中状态的技术求助

我开发了一个自定义表单，顶部有3个Checkbox选项，选中后会显示对应的文本内容，这个交互已经实现。表单里还有单选框和文本字段，但遇到一个问题：点击保存表单后，其他选中项的状态都能保留，只有Checkbox无法保持选中状态，不清楚原因和解决方法，相关代码如下：

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-sm-12">
  <p id="mt-error">Please select one of the treatments</p>
  <p>
    <b>Botox®/ Azzalure ®/Bocouture®/Alluzience® Injections</b><input type="checkbox" id="botox_checkbox" name="botox_checkbox" class="mt-checkbox" />
  </p>
</div>
<div id="botox_terms">
  <div class="col-sm-12">
    <ul class="liststyle">
      <li>
        I hereby give my consent to the aesthetic medical treatment known as Botulinum Toxin injections. All aspects of this treatment and the potential risks and complications have been fully explained to me, and I have had the opportunity to ask questions about
        the procedure including the limitations. All information has been given to me in clear and simple language. Not only have all questions been answered to my complete satisfaction but I also fully understand all the answers that have been given
        to me, and the practitioner has clarified all doubts that I have raised to my practitioner. I have had the opportunity to discuss alternative forms of treatment to obtain the results I desire, and I am satisfied that injection with Botulinum Toxin
        is the most suitable treatment in my particular case.
      </li>
    </ul>
  </div>
</div>

JavaScript代码 #

$(document).ready(function() {
  $('input[name^="date"]').datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    yearRange: '-100:+0',
  });

  $(window).resize(function() {
    resizeSignatures();
  });

  createSignature('guest-signature', {
    required: true,
  });

  createSignature('medical-signature', {
    required: true,
  });

  $('input[name^="date"]').each(function() {
    var dateFormat = new Date($(this).val());
    var month =
      parseInt(dateFormat.getMonth()) < 9 ?
      '0' + (dateFormat.getMonth() + 1) :
      dateFormat.getMonth() + 1;
    var newDate = dateFormat.getDate() + '/' + month + '/' + dateFormat.getFullYear();
    if (newDate.length > 0 && newDate.indexOf('NaN') < 0) {
      $(this).val(newDate);
    }
  });

  var now = new Date();
  var day = ('0' + now.getDate()).slice(-2);
  var month = ('0' + (now.getMonth() + 1)).slice(-2);
  var today = day + '/' + month + '/' + now.getFullYear();

  $('#dateGuestsignature').val(today);

  var myaddress = $('#addresshid').val();
  $('#Address').val(myaddress);

  $('#form').focusout(function(e) {
    var reqAttr = $(e.target).attr('required');
    errorMessage(e, reqAttr);
  });

  $('input[name^="date"]').change(function(e) {
    var reqAttr = $(e.target).attr('required');
    errorMessage(e, reqAttr);
  });

  $('#form').focusout(function(e) {
    var reqAttr = $(e.target).attr('required');
    errorMessage(e, reqAttr);
  });
});

$('#botox_checkbox').change(function() {
  if (this.checked) {
    $('#botox_terms').show();
  } else {
    $('#botox_terms').hide();
  }
});

$('#inj1_checkbox').change(function() {
  if (this.checked) {
    $('#inj1_terms').show();
  } else {
    $('#inj1_terms').hide();
  }
});

$('#inj2_checkbox').change(function() {
  if (this.checked) {
    $('#inj2_terms').show();
  } else {
    $('#inj2_terms').hide();
  }
});

$("#form").on('submit', function(event) {
  let checked = false;

  const checkboxes = $(".mt-checkbox");
  for (const checkbox of checkboxes) {
    if (checkbox.checked) {
      checked = true;
      break;
    }
  }

  if (!checked) {
    event.preventDefault();
    $("#mt-error").show();
    window.location.href = "#mt-error";
  } else {
    $("#mt-error").hide();
  }
});
// Function to save checkbox states to localStorage
function saveCheckboxState(checkboxId, checked) {
  localStorage.setItem(checkboxId, checked);
}

// Function to retrieve checkbox states from localStorage
function getCheckboxState(checkboxId) {
  return localStorage.getItem(checkboxId) === 'true';
}

$(document).ready(function() {
  // Initialize checkbox states on page load
  $('#botox_checkbox').prop('checked', getCheckboxState('botox_checkbox'));
  $('#inj1_checkbox').prop('checked', getCheckboxState('inj1_checkbox'));
  $('#inj2_checkbox').prop('checked', getCheckboxState('inj2_checkbox'));

  // Update and save checkbox states when they change
  $('#botox_checkbox, #inj1_checkbox, #inj2_checkbox').change(function() {
    saveCheckboxState(this.id, this.checked);
  });
});

问题原因分析 #

1. 重复的$(document).ready()调用：代码中存在两个独立的$(document).ready()块，第二个块的状态初始化逻辑可能和第一个块的执行顺序冲突，导致状态设置失效。
2. 表单提交时未强制保存状态：当前仅在Checkboxchange事件触发时保存状态，若表单提交导致页面刷新，可能状态未及时写入localStorage。
3. 未同步条款显示状态：从localStorage读取状态设置Checkbox选中后，对应的条款区域不会自动显示，因为只有change事件触发时才会切换显示状态。

修复步骤 #

1. 合并初始化逻辑：将所有$(document).ready()内的代码合并到同一个块中，确保执行顺序正确。
2. 提交前强制保存状态：在表单submit事件中，先保存所有Checkbox的当前状态，再处理提交逻辑。
3. 初始化时同步条款显示：设置Checkbox状态后，主动触发change事件，让对应的条款区域自动显示/隐藏。

修复后的完整代码 #

HTML部分（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-sm-12">
  <p id="mt-error">Please select one of the treatments</p>
  <p>
    <b>Botox®/ Azzalure ®/Bocouture®/Alluzience® Injections</b><input type="checkbox" id="botox_checkbox" name="botox_checkbox" class="mt-checkbox" />
  </p>
</div>
<div id="botox_terms">
  <div class="col-sm-12">
    <ul class="liststyle">
      <li>
        I hereby give my consent to the aesthetic medical treatment known as Botulinum Toxin injections. All aspects of this treatment and the potential risks and complications have been fully explained to me, and I have had the opportunity to ask questions about
        the procedure including the limitations. All information has been given to me in clear and simple language. Not only have all questions been answered to my complete satisfaction but I also fully understand all the answers that have been given
        to me, and the practitioner has clarified all doubts that I have raised to my practitioner. I have had the opportunity to discuss alternative forms of treatment to obtain the results I desire, and I am satisfied that injection with Botulinum Toxin
        is the most suitable treatment in my particular case.
      </li>
    </ul>
  </div>
</div>
<!-- 补充另外两个Checkbox对应的HTML结构 -->

JavaScript部分 #

// 工具函数：保存和读取Checkbox状态
function saveCheckboxState(checkboxId, checked) {
  localStorage.setItem(checkboxId, checked);
}

function getCheckboxState(checkboxId) {
  return localStorage.getItem(checkboxId) === 'true';
}

// 统一初始化逻辑
$(document).ready(function() {
  // 日期选择器初始化
  $('input[name^="date"]').datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    yearRange: '-100:+0',
  });

  $(window).resize(function() {
    resizeSignatures();
  });

  createSignature('guest-signature', { required: true });
  createSignature('medical-signature', { required: true });

  // 日期格式化处理
  $('input[name^="date"]').each(function() {
    var dateFormat = new Date($(this).val());
    var month = parseInt(dateFormat.getMonth()) < 9 ? '0' + (dateFormat.getMonth() + 1) : dateFormat.getMonth() + 1;
    var newDate = dateFormat.getDate() + '/' + month + '/' + dateFormat.getFullYear();
    if (newDate.length > 0 && newDate.indexOf('NaN') < 0) {
      $(this).val(newDate);
    }
  });

  // 设置当前日期
  var now = new Date();
  var day = ('0' + now.getDate()).slice(-2);
  var month = ('0' + (now.getMonth() + 1)).slice(-2);
  var today = day + '/' + month + '/' + now.getFullYear();
  $('#dateGuestsignature').val(today);

  // 填充地址
  var myaddress = $('#addresshid').val();
  $('#Address').val(myaddress);

  // 表单验证逻辑
  $('#form').focusout(function(e) {
    var reqAttr = $(e.target).attr('required');
    errorMessage(e, reqAttr);
  });

  $('input[name^="date"]').change(function(e) {
    var reqAttr = $(e.target).attr('required');
    errorMessage(e, reqAttr);
  });

  // 封装条款切换逻辑
  function toggleTerms(checkbox, termsSelector) {
    $(termsSelector)[checkbox.checked ? 'show' : 'hide']();
  }

  // Checkbox事件绑定
  $('#botox_checkbox').change(function() {
    toggleTerms(this, '#botox_terms');
    saveCheckboxState(this.id, this.checked);
  });

  $('#inj1_checkbox').change(function() {
    toggleTerms(this, '#inj1_terms');
    saveCheckboxState(this.id, this.checked);
  });

  $('#inj2_checkbox').change(function() {
    toggleTerms(this, '#inj2_terms');
    saveCheckboxState(this.id, this.checked);
  });

  // 初始化Checkbox状态并同步条款显示
  ['botox_checkbox', 'inj1_checkbox', 'inj2_checkbox'].forEach(id => {
    const $checkbox = $('#' + id);
    $checkbox.prop('checked', getCheckboxState(id));
    $checkbox.trigger('change');
  });

  // 表单提交处理
  $("#form").on('submit', function(event) {
    let hasChecked = false;
    const $checkboxes = $(".mt-checkbox");

    // 提交前强制保存所有Checkbox状态
    $checkboxes.each(function() {
      saveCheckboxState(this.id, this.checked);
      if (this.checked) hasChecked = true;
    });

    if (!hasChecked) {
      event.preventDefault();
      $("#mt-error").show();
      window.location.href = "#mt-error";
    } else {
      $("#mt-error").hide();
    }
  });
});

额外说明 #

• 若表单采用AJAX提交而非页面刷新，无需依赖localStorage，直接将Checkbox状态作为表单数据发送给后端，页面渲染时从后端返回的数据中设置Checkbox选中状态即可。
• 确保所有Checkbox对应的条款区域（如#inj1_terms）在HTML中存在，否则切换逻辑会失效。

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