Данные возвращаются в исходное состояние после события флажка

Question

У меня есть базовые данные с четырьмя столбцами, из которых один - флажок.Когда вы устанавливаете этот флажок, все остальные флажки в соответствующем столбце должны быть помечены как выбранные (пометить / удалить все виды функций).

Изначально я инициализирую пустой объект данных, и после выполнения вызова ajax япросто добавив несколько строк в мою таблицу.

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю флажок, все данные из моей таблицы данных удаляются и данные могут быть восстановлены в исходное состояние.

Я не могучтобы понять, в чем здесь проблема.Пожалуйста, предложите.

function checkAll(field) {
    debugger
    if (field) {
        if (field.checked) {
            // $("input[name='selectedRecords']").attr("checked", true)
            document.getElementById("selectedRecords").checked = true;
        } else {
            // $("input[name='selectedRecords']").attr("checked", false)
            document.getElementById("selectedRecords").checked = false;
        }
    }
}

Мой код инициализации с датой:

var oTable = $("#companies").dataTable({
    "sPaginationType": "simple",
    "dom": "<'top'p><'bottom'frti>",
    "bJQueryUI": true,
    /* "sServerMethod": "POST", */
    "bProcessing": false,
    "bServerSide": false
});

Ajax-вызов:

$.ajax({
    "dataType": "json",
    "type": "GET",
    "url": "/JQueryDataTablesAll/CompanyGsonMatrix",
    "data": null,
    "success": function(d) {
        var wshtml = '';
        wshtml += '<tr>';
        wshtml += '<td>col1</td>';
        wshtml += '<td>col2</td>';
        wshtml += '<td>col3</td>';
        wshtml += '<td><input id="selectedRecords" name="selectedRecords" type="checkbox" checked="checked" /></td>';
        wshtml += '</tr>';
        wshtml += '<tr>';
        wshtml += '<td>col1</td>';
        wshtml += '<td>col2</td>';
        wshtml += '<td>col3</td>';
        wshtml += '<td><input id="selectedRecords" name="selectedRecords" type="checkbox" checked="checked" /></td>';
        wshtml += '</tr>';

        $("#companies > tbody").html(wshtml);
    }
});

Таблица Html-кода:

<thead>
    <tr>
        <th>Company name</th>
        <th>Address</th>
        <th>Town</th>
        <th><input onclick="checkAll(this)" type="checkbox" checked="checked" /></th>
    </tr>
</thead>
<tbody>
    <% for(Company c: DataRepository.GetCompanies()){ %>
        <tr>
            <td><%=c.getName()%></td>
            <td><%=c.getAddress()%></td>
            <td><%=c.getTown()%></td>
            <td><%=c.getDelete()%></td>
        </tr>
    <% } %>
</tbody>

Сначала я получаю данные, которые должны быть:

заголовки Агент Abacus на Риджент-стрит в Лондоне удалить Александра Театральная станция на улице Уэст-Мидлендс удалить

Послевызов ajax меняется следующим образом:

заголовки флажок для пометки / удаления всех флажков col1 col2 col3 флажок col1 col2 col3 флажок

Теперь я нажимаю на отметку /снимите флажок, и я снова получу вывод ниже:

заголовки Агент Abacus на Риджент-стрит в Лондоне удалить Александра Театральная станция на улице Уэст-Мидлендс удалить