根据 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>\
    ');
});

希望这会有所帮助。

Answer 2

您将选中的attribute 添加到每个复选框，因此每个复选框都被选中，因此只需将checked 属性添加到您需要的复选框中

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

            tbodyEl.append('\
                <tr>\
                    <td><input type="checkbox" value="'+todo.id+'" id="myCheckbox" '+checkProp+'/></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>\
            ');
        });