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替换为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>\
            ');
        });

将复选框设置为基于Ajax GET请求进行检查

2 个答案: