js增加删除全选反选

基础概念

在JavaScript中，"全选"、"反选"和"删除"功能通常用于处理复选框（checkbox）的操作。这些操作允许用户一次性选择或取消选择多个选项，或者删除所有选中的选项。

类型与应用场景

全选：一键选中所有复选框。
反选：切换每个复选框的选中状态。
删除：移除所有选中的项目。

这些功能广泛应用于各种需要批量操作的场景，如：

网站后台管理系统中的数据筛选和处理。
电子商务网站的购物车管理。
文件管理器中的文件批量操作。

示例代码

以下是一个简单的HTML和JavaScript示例，展示了如何实现全选、反选和删除功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkbox Operations</title>
<script>
function selectAll() {
    var checkboxes = document.getElementsByName('item');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = true;
    }
}

function deselectAll() {
    var checkboxes = document.getElementsByName('item');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = false;
    }
}

function toggleSelect() {
    var checkboxes = document.getElementsByName('item');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = !checkboxes[i].checked;
    }
}

function deleteSelected() {
    var checkboxes = document.getElementsByName('item');
    for (var i = checkboxes.length - 1; i >= 0; i--) {
        if (checkboxes[i].checked) {
            checkboxes[i].parentNode.removeChild(checkboxes[i]);
        }
    }
}
</script>
</head>
<body>

<button onclick="selectAll()">全选</button>
<button onclick="deselectAll()">全不选</button>
<button onclick="toggleSelect()">反选</button>
<button onclick="deleteSelected()">删除选中项</button>

<form>
  <input type="checkbox" name="item" value="1"> Item 1<br>
  <input type="checkbox" name="item" value="2"> Item 2<br>
  <input type="checkbox" name="item" value="3"> Item 3<br>
  <!-- 更多复选框 -->
</form>

</body>
</html>