js点击删除按钮时,判断是否有复选框被选中,如果没有复选框被选中则提示用户进行选择,否则确认删除,并从表格中删除相应行
时间: 2024-03-17 18:44:37 浏览: 25
您可以通过以下代码实现:
```javascript
// 获取所有复选框
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 获取删除按钮
const deleteButton = document.querySelector('#delete-button');
// 给删除按钮添加点击事件监听器
deleteButton.addEventListener('click', function() {
let isAnyCheckboxChecked = false; // 是否有复选框被选中
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
isAnyCheckboxChecked = true;
// 从表格中删除相应行
const row = checkboxes[i].parentNode.parentNode;
row.parentNode.removeChild(row);
}
}
if (!isAnyCheckboxChecked) {
alert('请至少选择一项进行删除');
}
});
```
这段代码会先获取所有复选框和删除按钮,然后给删除按钮添加点击事件监听器。当用户点击删除按钮时,代码会遍历所有复选框,判断是否有复选框被选中。如果有,就从表格中删除相应行;如果没有,就提示用户进行选择。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)