前端在按钮上写个事件，按钮名称批量删除，点击该按钮后上方所有被选择了的checkbox按钮对应的数据都被删除

您可以在按钮的点击事件中，获取所有被选择的checkbox按钮，然后遍历这些checkbox，获取对应的数据并进行删除操作。具体实现可以参考以下代码：

// 获取所有被选择的checkbox按钮
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');

// 遍历所有被选择的checkbox，获取对应的数据并进行删除操作
checkboxes.forEach(function(checkbox) {
  var dataId = checkbox.getAttribute('data-id');
  // 根据dataId删除对应的数据，具体实现根据您的业务逻辑进行编写
  // ...
});

其中，`querySelectorAll` 方法可以获取所有符合选择器的元素，`forEach` 方法可以遍历数组中的每一个元素，`getAttribute` 方法可以获取元素的自定义属性值。您需要根据具体业务逻辑，对删除操作进行编写。

相关问题

前端点击批量删除按钮后将上面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);
  });
});

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

前端点击批量删除按钮后删除被复选框选中的数据，第一个复选框不删除

可以通过遍历复选框的方式来实现批量删除，具体操作如下：

1. 给批量删除按钮绑定点击事件。

2. 获取所有被选中的复选框。

3. 遍历所有被选中的复选框，将其对应的数据删除。

4. 但是要注意第一个复选框不能删除，可以通过添加一个判断条件来实现。

具体的代码实现如下：

// 获取批量删除按钮
var deleteBtn = document.getElementById('deleteBtn');

// 给批量删除按钮绑定点击事件
deleteBtn.onclick = function() {
  // 获取所有的复选框
  var checkboxes = document.getElementsByName('checkbox');

  // 遍历所有的复选框
  for (var i = 0; i < checkboxes.length; i++) {
    // 判断当前复选框是否被选中
    if (checkboxes[i].checked) {
      // 判断是否为第一个复选框
      if (i !== 0) {
        // 删除对应的数据
        // ...
      }
    }
  }
}

其中，`checkboxes` 为所有复选框的集合，需要根据实际情况修改。`i !== 0` 表示当前遍历的复选框不是第一个复选框，需要删除其对应的数据。