前端点击批量删除按钮后将上面checkbox被勾选的那行信息删除

实现批量删除的流程一般如下：

1. 给“批量删除”按钮绑定点击事件。
2. 在点击事件中，获取所有被选中的checkbox元素。
3. 遍历每个被选中的checkbox元素，获取其对应的行信息。
4. 删除每个被选中的行信息。

下面是一个简单的示例代码：

HTML：

<table>
  <thead>
    <tr>
      <th><input type="checkbox" id="select-all"></th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Jane</td>
      <td>30</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>
<button id="delete-selected">批量删除</button>

JavaScript：

// 获取“全选”checkbox元素
var selectAllCheckbox = document.getElementById('select-all');
// 获取“批量删除”按钮元素
var deleteButton = document.getElementById('delete-selected');

// 给“全选”checkbox元素绑定点击事件
selectAllCheckbox.addEventListener('click', function() {
  // 获取所有checkbox元素
  var checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
  // 设置所有checkbox的选中状态
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = selectAllCheckbox.checked;
  });
});

// 给“批量删除”按钮绑定点击事件
deleteButton.addEventListener('click', function() {
  // 获取所有被选中的checkbox元素
  var selectedCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]:checked');
  // 遍历每个被选中的checkbox元素，获取其对应的行信息，并删除该行信息
  selectedCheckboxes.forEach(function(checkbox) {
    var row = checkbox.parentNode.parentNode;
    row.parentNode.removeChild(row);
  });
});

注意，在实际开发中，还需要考虑一些边界情况，比如没有勾选任何行信息时，点击“批量删除”按钮应该提示用户选择行信息。