时间戳

首页 > 解决方案 > 如何在选中或未选中复选框的基础上添加/删除项目？

javascript - 如何在选中或未选中复选框的基础上添加/删除项目？

问题描述

我在下面写了几行代码

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（值）推送到“选定”数组中。上面的代码没有添加该复选框的值。此外，当我尝试取消选中未从“选定”数组中删除 id 的复选框时。请帮忙！！！

标签： javascriptjquerycheckbox

解决方案

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

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>

推荐阅读