javascript - 如何在 jQuery onload 中选中复选框

Question

这里我正在编辑表单。我有两个数组。在一个数组 (allAmenities) 中，我拥有所有便利设施名称；第二个数组 (pspecialPropertyAmenity) 只有两个设施名称。

我想选中此设施名称复选框。我怎样才能做到这一点？

var htmlString = '';
$(document).ready(function() {
  var allAmenities = {
    "status": "success",
    "count": 3,
    "data": [{
        "amenityId": "1",
        "propertylistId": "1",
        "amenityName": "Lift",

      }, {

        "amenityId": "2",
        "propertylistId": "1",
        "amenityName": "Gym",
      }, {

        "amenityId": "3",
        "propertylistId": "1",
        "amenityName": "Swimming Pool",
      }, {

        "amenityId": "4",
        "propertylistId": "1",
        "amenityName": "Power backup",
      }, {

        "amenityId": "5",
        "propertylistId": "1",
        "amenityName": "Security",
      },

    ]
  };



  var particularPropertyAmenity = [{
    "amenityName": "Lift",
    "amenityStatus": "Active"
  }, {
    "amenityName": "Security",
    "amenityStatus": "Active"
  }]

  htmlString += '<form>First Name: <input type="text" name="fname"><br></br><span id="linz"></span>';

  $.each(allAmenities['data'], function(key, value) {

    htmlString += 'Amenities:  <input type="checkbox" name="amenity_check[]"  class="customcheckbox" value="' + value.amenityName + '"> ' + value.amenityName + '';
  });
  $('#linz').append(htmlString);

  htmlString += '</form>';

  $('.rentEdit').empty().append(htmlString);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="rentEdit"></div>

预期输出:

必须选中“电梯和安全”复选框。

Answer 1

您可以使用Array.some()检查数组中是否存在当前便利设施，并根据truthy添加checked属性

var setChecked = particularPropertyAmenity.some(function(e) {
  return e.amenityName == value.amenityName;
});
htmlString += 'Amenities:  <input type="checkbox" ' + (setChecked ? 'checked' : '') + ' name="amenity_check[]"  class="customcheckbox" value="' + value.amenityName + '"> ' + value.amenityName + '<br>';

var htmlString = '';
$(document).ready(function() {
  var allAmenities = {
    "status": "success",
    "count": 3,
    "data": [{
        "amenityId": "1",
        "propertylistId": "1",
        "amenityName": "Lift",

      },
      {

        "amenityId": "2",
        "propertylistId": "1",
        "amenityName": "Gym",
      },
      {

        "amenityId": "3",
        "propertylistId": "1",
        "amenityName": "Swimming Pool",
      },
      {

        "amenityId": "4",
        "propertylistId": "1",
        "amenityName": "Power backup",
      },
      {

        "amenityId": "5",
        "propertylistId": "1",
        "amenityName": "Security",
      },

    ]
  };



  var particularPropertyAmenity = [{
      "amenityName": "Lift",
      "amenityStatus": "Active"
    },
    {
      "amenityName": "Security",
      "amenityStatus": "Active"
    }
  ]

  htmlString += '<form>First Name: <input type="text" name="fname"><br></br><span id="linz"></span>';

  $.each(allAmenities['data'], function(key, value) {

    var setChecked = particularPropertyAmenity.some(function(e) {
      return e.amenityName == value.amenityName;
    });
    htmlString += 'Amenities:  <input type="checkbox" ' + (setChecked ? 'checked' : '') + ' name="amenity_check[]"  class="customcheckbox" value="' + value.amenityName + '"> ' + value.amenityName + '<br>';
  });
  $('#linz').append(htmlString);

  htmlString += '</form>';

  $('.rentEdit').empty().append(htmlString);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="rentEdit"></div>