如何在jQuery onload中选中复选框

Question

在这里，我正在编辑表格。 我有两个数组。 在一个数组（ allAmenities ）中，我拥有所有设施的名称； 第二个数组（ particularPropertyAmenity ）只有两个便利设施名称。

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

 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() checked Array中是否存在当前便利设施，并根据真实情况添加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> 

Answer 2

使用属性选择器：

  $.each( particularPropertyAmenity, function( key, value ) {  
                   if(value.amenityStatus=="Active")
                   {
                    $("input[value='"+value.amenityName+"']").prop("checked",true);
                   }
})

这是一个演示：

 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); $.each( particularPropertyAmenity, function( key, value ) { if(value.amenityStatus=="Active") { $("input[value='"+value.amenityName+"']").prop("checked",true); } }); }); 

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

Answer 3

您可以将“已检查”添加到您的便利设施数据中，并使用它来设置要检查的特定框。

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 active = false;
    $.each(particularPropertyAmenity, function(i, v) {
      if (v.amenityName == value.amenityName) {
        active = v.amenityStatus == "Active";
        return;
      }
    });
    htmlString += 'Amenities:  <input type="checkbox" name="amenity_check[]"  class="customcheckbox" value="' + value.amenityName + '" ' + (active ? 'checked' : '') + '> ' + value.amenityName + '';
  });
  $('#linz').append(htmlString);

  htmlString += '</form>';

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

});

http://jsfiddle.net/jpwkyw37/1/

Answer 4

在脚本中添加以下代码。

$.each(particularPropertyAmenity, function(key, value) {
  $("input[value='"+value.amenityName+"']").prop('checked', true);
});

 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); $.each(particularPropertyAmenity, function(key, value) { $("input[value='"+value.amenityName+"']").prop('checked', true); }); }); 

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