前端全选/全不选的函数代码

以下是一个简单的实现前端全选/全不选的函数代码：

function toggleAllCheckboxes(checkboxes, isChecked) {
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = isChecked;
  });
}

其中，`checkboxes` 是一个包含所有需要被全选/全不选的复选框的数组，`isChecked` 是一个布尔值，表示是否应该选中所有复选框。当 `isChecked` 为 `true` 时，所有复选框被选中；当 `isChecked` 为 `false` 时，所有复选框都不被选中。

相关问题

前端一个按钮实现全选/全不选功能

可以通过以下方式实现：

HTML：

<!-- 假设你有一组 checkbox，它们的 class 都是 "checkbox-item" -->
<input type="checkbox" id="check-all" /> 全选/全不选
<input type="checkbox" class="checkbox-item" />
<input type="checkbox" class="checkbox-item" />
<input type="checkbox" class="checkbox-item" />
<!-- 其他 checkbox 组成的列表 -->

JS：

var checkAll = document.getElementById('check-all');
var checkBoxItems = document.querySelectorAll('.checkbox-item');

checkAll.addEventListener('change', function() {
  var isChecked = checkAll.checked;
  for (var i = 0; i < checkBoxItems.length; i++) {
    checkBoxItems[i].checked = isChecked;
  }
});

for (var i = 0; i < checkBoxItems.length; i++) {
  checkBoxItems[i].addEventListener('change', function() {
    var isAllChecked = true;
    for (var j = 0; j < checkBoxItems.length; j++) {
      if (!checkBoxItems[j].checked) {
        isAllChecked = false;
        break;
      }
    }
    checkAll.checked = isAllChecked;
  });
}

解释一下，首先获取全选/全不选按钮和所有的 checkbox，然后给全选/全不选按钮添加 change 事件监听器，在事件处理函数中，将所有的 checkbox 的 checked 属性值设为当前全选/全不选按钮的 checked 属性值。

同时，给每个 checkbox 添加 change 事件监听器，在事件处理函数中，先遍历所有 checkbox 确定是否有未选中的，如果有就不是全选状态，否则就是全选状态，将全选/全不选按钮的 checked 属性值设为对应的状态即可。

js实现全选/全不选功能

HTML代码：

<input type="checkbox" id="checkAll">全选/全不选
<br>
<input type="checkbox" class="checkbox">选项1
<br>
<input type="checkbox" class="checkbox">选项2
<br>
<input type="checkbox" class="checkbox">选项3
<br>
<input type="checkbox" class="checkbox">选项4

JavaScript代码：

var checkAll = document.getElementById("checkAll");
var checkboxes = document.getElementsByClassName("checkbox");

// 全选/全不选按钮点击事件
checkAll.onclick = function() {
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
};

// 单个复选框点击事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() {
    var checkedCount = 0;
    for (var j = 0; j < checkboxes.length; j++) {
      if (checkboxes[j].checked) {
        checkedCount++;
      }
    }
    checkAll.checked = checkedCount === checkboxes.length;
  };
}

解释：首先通过 `getElementById` 和 `getElementsByClassName` 方法获取全选/全不选按钮和所有的复选框，然后为全选/全不选按钮和每个复选框分别绑定点击事件。全选/全不选按钮点击事件中，遍历所有复选框，并将它们的 `checked` 属性设置为全选/全不选按钮的 `checked` 属性。单个复选框点击事件中，遍历所有复选框，统计选中的复选框数量，若数量等于所有复选框数量，则将全选/全不选按钮的 `checked` 属性设置为 `true`，否则设置为 `false`。