编辑表单时匹配LocalStorage复选框值与数据库值并回显勾选

嘿，我懂你遇到的麻烦了——现在的代码直接把LocalStorage里合并的字符串做成了新复选框，完全没用到数据库返回的原始选项，咱们来调整一下代码，让匹配的选项自动打上选中标记：

核心解决思路 #

1. 先把LocalStorage中逗号分隔的MaterialName拆成数组，方便后续逐个匹配物料
2. 在渲染数据库返回的物料复选框时，判断当前物料是否在选中数组里，符合条件就添加checked属性
3. 删掉原本错误的新增合并值复选框的代码

修改后的完整代码 #

$(function() {
  // 1. 从LocalStorage取数据并处理选中物料数组
  var lsdata = JSON.parse(localStorage.getItem('key'));
  // 处理空值情况，避免split报错
  var selectedMaterials = lsdata.MaterialName ? lsdata.MaterialName.split(',') : [];

  // 填充表单其他字段（这部分保留你原有代码即可）
  $('#formid').val(lsdata.FormID);
  $('#createdate').val(lsdata.CreateDate);
  $('#formfiller').val(lsdata.FormFiller);
  $('#customerlist').empty().append(lsdata.CustomerName.split(',').map(c => new Option(c, c)));
  $('#contact').val(lsdata.CustomerContact);
  $('#worklist').empty().append(lsdata.WorkName.split(',').map(c => new Option(c, c)));
  $('#readytodate').val(lsdata.ReadyToDate);
  $('#instructions').val(lsdata.Instructions);
  $('#amount').val(lsdata.Amount);

  // 2. 修改物料渲染函数，加入选中判断逻辑
  function addMaterials(material, selectedMaterials) {
    // 判断当前物料是否在选中列表中，生成checked属性
    var isChecked = selectedMaterials.includes(material.MaterialName) ? 'checked' : '';
    // 用模板字符串拼接HTML，更清晰不易出错
    $MaterialName.append(`<input type="checkbox" value="${material.MaterialName}" ${isChecked}>${material.MaterialName}</input>`);
  }

  // 3. 发起Ajax请求时传入选中物料数组
  $.ajax({
    type: 'GET',
    url: '/api/materials',
    dataType: 'json',
    success: function(materials) {
      $.each(materials, function(i, material) {
        addMaterials(material, selectedMaterials);
      });
    },
    error: function() { alert('Virhe ladattaessa') }
  });

  // 删掉这行错误代码：$('#materiallist').append('<input type="checkbox" checked>' + lsdata.MaterialName + ' </input>');
});

关键修改点说明 #

• 拆分选中数组：把"Xpohja,Tarra"转成["Xpohja", "Tarra"]，方便后续逐个匹配数据库返回的物料
• 动态添加选中状态：渲染每个物料复选框时，用includes()方法判断是否在选中数组里，符合条件就自动加上checked属性
• 移除错误逻辑：删掉了直接新增合并值复选框的代码，现在只会渲染数据库返回的原始物料选项，并自动勾选匹配项

这样调整后，页面加载时从数据库拉取的物料复选框里，Xpohja和Tarra就会自动被选中啦！

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