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

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"
}

这是从数据库中获取所有材料的功能：

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 增加了新的价值。我希望它为那些 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 字符串转换为映射或数组并对其进行迭代以设置选中的属性，如下所示：

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

Answer 2

我没有足够的声誉来发表评论，但您的意思是您希望复选框值设置为 'Xpohja,Tarra' 吗？或者你想要两个新的复选框？一个是“Xpohja”，另一个是“Tarra”？

如果你想要一个带有值的复选框，我在下面留下了一个解决方案。

var lsdata = "Xpohja,Tarra";
 
$('#materiallist').append('<input type="checkbox" checked> </input>');

$('#materiallist input').val(lsdata);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="materiallist"></div>

Answer 3

var lsdata = JSON.parse(localStorage.getItem('key'));
var chkArray = lsdata.MaterialName.split(',');
for(var i = 0; i < chkArray.length; i++){
   $('input[type="checkbox"]').find('[value="'+ chkArray[i] +'"]').attr('checked', true)
}