組複選框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[todo.id]替換id myCheckbox。

而且要檢查checked真假都將檢查你應該添加屬性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>\ 
      '); 
     });