javascript - 根据 Ajax GET 请求将复选框设置为选中

Question

我正在尝试根据通过 ajax get 请求来自服务器的数据来检查复选框:

---

var GetTodos = (function () {
//GET/READ 
   return $.ajax({
        url: '/api/Todos/GetTodos',
        contentType: 'application/json',
        success: function (todos) {
            var tbodyEl = $('tbody');
            $.each(todos, function (i, todo) {
                if (!todo.isCompleted)
                    $('#myCheckbox').prop('checked', false);
                else
                    $('#myCheckbox').prop('checked', true);
                tbodyEl.append('\
                    <tr>\
                        <td><input type="checkbox" value="'+todo.id+'" id="myCheckbox" checked/></td>\
                        <td class="id">' + todo.id + '</td>\
                        <td><input type="text" class="name" value="' + todo.text + '"></td>\
                        <td>\
                            <button id="editBtn" class="btn btn-warning">Update</button>\
                            <button id="deleteBtn" class="btn btn-danger">Delete</button>\
                        </td>\
                    </tr>\
                ');
            });
        }
    });
});

---

所以我发送一个ajax get请求来获取json数据，以下响应是这样的

---

[
  {
    "id": 1,
    "text": "Walk the dog",
    "isCompleted": false
  },
  {
    "id": 4,
    "text": "go out with friends",
    "isCompleted": false
  },
  {
    "id": 5,
    "text": "touch the fishy",
    "isCompleted": true
  }
]

---

这就是我的结局

---

---

所以复选框没有被正确选中。如果有人可以帮助我解决这个问题，我将不胜感激，谢谢。

Answer 1

<强> Working fiddle 。

首先，id 在同一文档中应该是唯一的，因此在您的情况下，将 id myCheckbox 替换为 id myCheckbox[todo.id] .

checked true 和 false 都会检查输入，您应该添加属性 checked 以防万一您想检查:

$.each(todos, function (i, todo) {
    var checked = '';

    if (todo.isCompleted)
        checked = 'checked';

    tbodyEl.append('\
        <tr>\
            <td><input type="checkbox" value="'+todo.id+'" id="myCheckbox['+todo.id+']" '+checked+'/></td>\
            <td class="id">' + todo.id + '</td>\
            <td><input type="text" class="name" value="' + todo.text + '"></td>\
            <td>\
                <button id="editBtn" class="btn btn-warning">Update</button>\
                <button id="deleteBtn" class="btn btn-danger">Delete</button>\
            </td>\
        </tr>\
    ');
});

希望这有帮助。