如何在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>