javascript - 如何根据选中或未选中的复选框添加/删除项目？

Question

我写了下面几行代码

var selectedFinal = [];
//On click check all records
$(document).on("click", "#completebatch,.commoncheckbox", function() {

  var checkBoxCount = 0;
  var selected = [];

  $("#selected_students").empty();

  $('#studentListBody input:checked').not(".disabled-check").each(function() {
    var id = $(this).val();
    if ($("#" + id).is(":checked")) {
      checkBoxCount++;
      selected.push(id);
    } else {
      checkBoxCount--;
      selected.pop(id);
    }
  });

  $("#allStudentIds").val($.unique(selected));

});

<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>
  </thead>

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

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

我创建了带有复选框的 html 表，用户可以在其中取消选中或选中复选框。基于选中或未选中的复选框，我尝试将选中的复选框的 id(值)推送到“selected”数组中。上面的代码没有添加该复选框的值。另外，当我尝试取消选中该复选框时，该 id 不会从“选定”数组中删除。请帮忙!!!

Answer 1

为什么不在checked复选框上简单地使用map()和get():

var selectedFinal = [];
//On click check all records
$(document).on("click", "#completebatch,.commoncheckbox", function () { 
    selectedFinal = $('.commoncheckbox:checked').map((i,el) =>{
    return $(el).attr('value')
  }).get();
  console.log(selectedFinal);
});

<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>
  </thead>

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

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