如何在html表中未选中的复选框的基础上添加和删除ID？

Question

我已经在javascript中编写了以下代码行

$(document).on("change", ".commoncheckbox", function() {
    var studentIds = $("#allStudentIds").val().trim();
    $("#tagsOfStudents").show();
    $("#empty_row").remove();
    var id = $(this).val();
    var generatedString;
    if ($(this).is(":checked")) {
      if (studentIds == "") {
        generatedString = id;
      } else {
        generatedString = studentIds + "," + id;
      }
      var uniqueList = generatedString.split(',').filter(function(item, i, allItems) {
        return i == allItems.indexOf(item);
      }).join(',');
      $("#allStudentIds").val(uniqueList);
      var $td = $(this).closest('tr').children('td');
      var name = $td.eq(2).text();
      var gender = $td.eq(4).text();
      var className = $td.eq(3).text();
      var deleteButton = '<button title="Delete" onclick="deleteRow(\'' + id + '\')" class="btn btn-danger  table_btn btn-outline btn-sm"><i class="fa fa-trash"></i></button>';
      var html = '<tr id=row_' + id + '>' + '<td>' + name + '</td>' + '<td>' + className + '</td>' + '<td>' + gender + '</td>' + '<td>' + deleteButton + '</td>' + '</tr>';
      if ($('#row_' + id).length > 0) {} else {
        $("#selected_students").append(html);
      }
    } else {
      if ($('#row_' + id).length > 0) {
        $("#row_" + id).remove();
      }
    }
  }

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th><input onclick="checkenabledisable()" id="completebatch" type="checkbox"></th>
    <th></th>
    ...
  </thead>

  <tbody id="studentListBody">
    <tr>
      <td><input class="commoncheckbox disabled-check" value="578" type="checkbox" disabled=""></td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td><input class="commoncheckbox" value="357" type="checkbox"></td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>

      <td><input class="commoncheckbox" value="123" type="checkbox"></td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
  </tbody>
</table>

<input type="hidden" value="" id="allStudentIds">

我在表主体“ studentListBody ”中添加了带有commoncheckbox类的复选框。在选中和取消选中复选框的基础上，该表的数据分别成功地附加到另一个表“ selected_student”中并被删除。另外，在选中和取消选中复选框的基础上，我尝试将学生的ID（选中的复选框的值）附加到行$("#allStudentIds").val(uniqueList);的隐藏输入中。

每当选中此复选框时，它就会存储在隐藏的输入标签中：

input type="hidden" value="5ae957dbbb2c561a10003dc7,5ae9584bbb2c561a10003dca,5ae958a4bb2c561a10003dcc" id="allStudentIds">

现在，我正在尝试调整上面的代码，以便在取消选中复选框时从隐藏的输入中删除ID。

Answer 1

我认为简单的方法是使用replace，也许有比这更好的解决方案，但是现在我还不知道

$(document).on("change", ".commoncheckbox", function() {
    var studentIds = $("#allStudentIds").val().trim();
    $("#tagsOfStudents").show();
    $("#empty_row").remove();
    var id = $(this).val();
    var generatedString;
    if ($(this).is(":checked")) {
      if (studentIds == "") {
        generatedString = id;
      } else {
        generatedString = studentIds + "," + id;
      }
      var uniqueList = generatedString.split(',').filter(function(item, i, allItems) {
        return i == allItems.indexOf(item);
      }).join(',');
      $("#allStudentIds").val(uniqueList);
      var $td = $(this).closest('tr').children('td');
      var name = $td.eq(2).text();
      var gender = $td.eq(4).text();
      var className = $td.eq(3).text();
      var deleteButton = '<button title="Delete" onclick="deleteRow(\'' + id + '\')" class="btn btn-danger  table_btn btn-outline btn-sm"><i class="fa fa-trash"></i></button>';
      var html = '<tr id=row_' + id + '>' + '<td>' + name + '</td>' + '<td>' + className + '</td>' + '<td>' + gender + '</td>' + '<td>' + deleteButton + '</td>' + '</tr>';
      if ($('#row_' + id).length > 0) {} else {
        $("#selected_students").append(html);
      }
    } else {
      var removeId = studentIds.replace( ','+id+',' , '').replace( ','+id , '').replace( id+',' , '').replace(id , '');
      $("#allStudentIds").val(removeId);
      if ($('#row_' + id).length > 0) {
        $("#row_" + id).remove();
      }
    }
  }

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th><input onclick="checkenabledisable()" id="completebatch" type="checkbox"></th>
    <th></th>
    ...
  </thead>

  <tbody id="studentListBody">
    <tr>
      <td><input class="commoncheckbox disabled-check" value="578" type="checkbox" disabled=""></td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td><input class="commoncheckbox" value="357" type="checkbox"></td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>

      <td><input class="commoncheckbox" value="123" type="checkbox"></td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
  </tbody>
</table>

<input type="text" value="" id="allStudentIds">