在UI中显示之前，使用jquery选中复选框

Question

下面是我的案例：

我正在从mysql数据库中读取数据，然后使用jsp、servlet和jquery将其显示在表格中。我正在创建动态行。我的问题是我想根据数据库中的值选择复选框。以下是示例代码：

$.ajax({
                url: 'FetchQAStatus',
                type: 'POST',
                contentType: 'text/html',

                success: function (data) {
                    console.log(data);
                    var tbody = $('#edit_table_body');
                      $.each(data, function(key,value) { 
                          tbody.append('<tr><td>'+value['id']+'</td><td><select      name="project" id="project" class="project"><option value="Geo">Geo</option>'+
                                '<option value="UAC">UAC</option></select></td><td><input type="text" name="jira" id="jira" class="freshblue" value="'+
                                value['jira']+'"/>'+'<td><textarea name="summary" id="summary" >'+value['summary']+'</textarea></td><td>'+
                                '<input type="text" name="status" id="status" class="freshblue" value="'+value['status']+'"/></td>'+
                                '<td><textarea name="comments" id="comments" >'+value['comments']+'</textarea></td><td><input type="checkbox" '+
                                'name="prod_deploy" id="prod_deploy">'+
                                '</td></tr>');

                            $(this).find("input#prod_deploy").prop("checked", true);

                      });



                        $(".edit_status").slideToggle();

                },

但这不是选中复选框，因为复选框在UI上仍然不可见/未加载。请帮帮忙

Answer 1

您可以执行以下任一操作：

...
var content = '<tr>'
  + '<td>' + value['id'] + '</td>'
  + '<td>'
    + '<select name="project" id="project" class="project">'
      + '<option value="Geo">Geo</option>'
      + '<option value="UAC">UAC</option>'
    + '</select>'
  + '</td>'
  + '<td>'
    + '<input type="text" name="jira" id="jira" class="freshblue" value="' + value['jira'] + '"/>'
  + '</td>'
  + '<td>'
    + '<textarea name="summary" id="summary" >' + value['summary'] + '</textarea>'
  + '</td>'
  + '<td>'
    + '<input type="text" name="status" id="status" class="freshblue" value="' + value['status'] + '"/>'
  + '</td>'
  + '<td>'
    + '<textarea name="comments" id="comments" >' + value['comments'] + '</textarea>'
  + '</td>'
  + '<td>'
    + '<input type="checkbox" name="prod_deploy" id="prod_deploy" checked>'
  + '</td>'
+ '</tr>';

tbody.append(content);
$(content).find('input#prod_deploy').prop('checked', true);

或者这样：

...
var content = '<tr>'
  + '<td>' + value['id'] + '</td>'
  + '<td>'
    + '<select name="project" id="project" class="project">'
      + '<option value="Geo">Geo</option>'
      + '<option value="UAC">UAC</option>'
    + '</select>'
  + '</td>'
  + '<td>'
    + '<input type="text" name="jira" id="jira" class="freshblue" value="' + value['jira'] + '"/>'
  + '</td>'
  + '<td>'
    + '<textarea name="summary" id="summary" >' + value['summary'] + '</textarea>'
  + '</td>'
  + '<td>'
    + '<input type="text" name="status" id="status" class="freshblue" value="' + value['status'] + '"/>'
  + '</td>'
  + '<td>'
    + '<textarea name="comments" id="comments" >' + value['comments'] + '</textarea>'
  + '</td>'
  + '<td>'
    + '<input type="checkbox" name="prod_deploy" id="prod_deploy" checked>' // <== notice the "checked" attribute here
  + '</td>'
+ '</tr>';

tbody.append(content);

Answer 2

这个问题已经解决了。发布答案，以防有人在寻找：

  var prodCheck = (value['isProd'] == true) ? "checked":"";
                          var content = '<tr><td>'+value['id']+'</td><td><select name="project" id="project" class="project"><option value="Geo">Geo</option>'+
                            '<option value="UAC">UAC</option></select></td><td><input type="text" name="jira" id="jira" class="freshblue" value="'+
                            value['jira']+'"/>'+'<td><textarea name="summary" id="summary" >'+value['summary']+'</textarea></td><td>'+
                            '<input type="text" name="status" id="status" class="freshblue" value="'+value['status']+'"/></td>'+
                            '<td><textarea name="comments" id="comments" >'+value['comments']+'</textarea></td><td><input type="checkbox" '+
                            'name="prod_deploy" class="prod_deploy" '+prodCheck+'>'+
                            '</td></tr>';
                          tbody.append(content);

Answer 3

下面是代码，您可以在显示复选框之前将其显示为选中状态。

<input type="checkbox" checked="true" />

现在，按照上面的方式追加您想要显示选中复选框的位置。