javascript - 编辑表单时来自本地存储的复选框值

Question

我已将值从 html 表单存储到 localStorage，然后从 localStorage 获取数据以供编辑。选中的复选框值 (MaterialName) 作为数组存储到 localStorage。原始复选框值通过 ajax 来自数据库。我需要做什么才能在 localStorage 中获取这些值以匹配数据库中的值，并在编辑表单时再次检查？或者甚至可以这样吗？

// localstorage value
{
  "FormID": 150,
  "CreateDate": "2019-09-17T00:00:00",
  "FormFiller": "JOkuMuu",
  "CustomerName": "Wsoy",
  "CustomerContact": "Masa",
  "WorkName": "Lajitelmapakkaus",
  "ReadyToDate": "2019-09-19T00:00:00",
  "Instructions": "Tarkasta kirjat ",
  "Amount": 50,
  "MaterialName": "Xpohja,Tarra"
}

这是从数据库中获取所有 Material 的函数:

function addMaterials(material) {
  $MaterialName.append('<input type="checkbox" value="' + material.MaterialName + '">' + material.MaterialName + ' </input>');
}
$.ajax({
  type: 'GET',
  url: '/api/materials',
  dataType: 'json',
  success: function(materials) {
    $.each(materials, function(i, material) {
      addMaterials(material);
    });
  },
  error: function() {
    alert: ('Virhe ladattaessa')
  }
});

这是我试图获取要重新检查的已检查值的函数:

$(function() {
  //bring data from localStorage
  var lsdata = JSON.parse(localStorage.getItem('key'));
  //put data to form
  $('#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);
  $('#materiallist').append('<input type="checkbox" checked>' + lsdata.MaterialName + ' </input>');
});

除 MaterialName 外，其他一切正常。它通过 Xpohja,Tarra 增加了新的值(value)。我希望它为那些 Xpohja 和 Tarra 添加“选中”，而不是新值。

Answer 1

给每个复选框一个与 materiaName 相同的 id，如下所示:

<input type="checkbox" name="vehicle" value="Bike" id="Xpohja">Xpohja <br>
<input type="checkbox" name="vehicle" value="Car" id="Tarra">Tarra<br>

现在，当您从 localStorage 获取值以编辑表单时，您可以将 json 字符串转换为映射或数组，并迭代它以设置 checked 属性，如下所示:

$('#id').attr('checked', true)