使用js写一个全选和反选的操作

当涉及到全选和反选的操作时，通常我们会使用 JavaScript 来处理这些逻辑。以下是一个简单的示例，展示了如何使用 JavaScript 实现全选和反选的功能。

假设我们有一个包含复选框的 HTML 列表，以及两个按钮分别用于全选和反选。

HTML 代码：

<input type="checkbox" id="selectAll"> 全选<br>
<input type="checkbox" class="itemCheckbox"> 项目 1<br>
<input type="checkbox" class="itemCheckbox"> 项目 2<br>
<input type="checkbox" class="itemCheckbox"> 项目 3<br>
<button onclick="selectAll()">全选</button>
<button onclick="inverseSelect()">反选</button>

接下来，我们将使用 JavaScript 来实现全选和反选的函数。

JavaScript 代码：

function selectAll() {
  // 获取所有的项目复选框
  var checkboxes = document.getElementsByClassName('itemCheckbox');
  
  // 遍历复选框并设置它们的选中状态为 true
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = true;
  }
}

function inverseSelect() {
  // 获取所有的项目复选框
  var checkboxes = document.getElementsByClassName('itemCheckbox');
  
  // 遍历复选框并反转它们的选中状态
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = !checkboxes[i].checked;
  }
}

在上述代码中，selectAll() 函数通过获取具有类名 "itemCheckbox" 的所有复选框，并将它们的 checked 属性设置为 true，从而实现全选功能。而 inverseSelect() 函数则通过遍历复选框并将它们的 checked 属性取反，从而实现反选功能。

请注意，上述示例仅用于演示目的，并且假设您的 HTML 和 JavaScript 代码位于同一个文件中。在实际项目中，您可能需要根据您的项目结构和需求进行适当的调整。此外，还可以使用更现代的前端框架或库（如 React、Vue.js 等）来更高效地处理这些操作。