实现多选框的全选全不选返选

可以使用 JavaScript 实现多选框的全选全不选返选功能，代码如下：

// 获取全选按钮和所有选项框
const selectAll = document.getElementById('select-all');
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// 给全选按钮添加事件监听器
selectAll.addEventListener('change', function() {
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = selectAll.checked;
  });
});

// 给每个选项框添加事件监听器
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    // 如果所有选项框都已选中，则将全选按钮状态改为已选中
    selectAll.checked = [...checkboxes].every(function(checkbox) {
      return checkbox.checked;
    });
  });
});

这段代码将全选按钮与所有选项框绑定，当全选按钮选中时，所有选项框也将被选中；当某个选项框取消选中时，如果所有选项框都已选中，则将全选按钮状态改为已选中。

相关问题

jquery实现多选框全选

以下是使用jQuery实现多选框全选的代码：

// 给全选按钮绑定点击事件
$("#checkAll").click(function(){
    // 获取全选按钮的状态
    var status = $(this).prop("checked");
    // 将所有的多选框的状态设置为与全选按钮相同
    $("input[type='checkbox']").prop("checked", status);
});

// 给每个多选框绑定点击事件
$("input[type='checkbox']").click(function(){
    // 获取所有多选框的数量
    var total = $("input[type='checkbox']").length;
    // 获取已选中的多选框的数量
    var checkedNum = $("input[type='checkbox']:checked").length;
    // 如果已选中的多选框的数量等于所有多选框的数量，则将全选按钮的状态设置为选中，否则设置为未选中
    if(checkedNum == total){
        $("#checkAll").prop("checked", true);
    }else{
        $("#checkAll").prop("checked", false);
    }
});

js复选框全选全不选

在JavaScript中，可以通过以下方式实现复选框的全选和全不选功能：

1. HTML结构：

<input type="checkbox" id="selectAll"> 全选
<input type="checkbox" class="checkbox"> 选项1
<input type="checkbox" class="checkbox"> 选项2
<input type="checkbox" class="checkbox"> 选项3

2. JavaScript代码：

// 获取全选复选框和其他复选框的元素
var selectAllCheckbox = document.getElementById("selectAll");
var checkboxes = document.getElementsByClassName("checkbox");

// 全选复选框的点击事件处理函数
selectAllCheckbox.addEventListener("click", function() {
    // 遍历其他复选框，根据全选复选框的状态设置它们的状态
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = selectAllCheckbox.checked;
    }
});

以上代码中，首先通过`getElementById`和`getElementsByClassName`方法获取到全选复选框和其他复选框的元素。然后，给全选复选框添加了一个点击事件处理函数，当全选复选框被点击时，遍历其他复选框，并根据全选复选框的状态设置它们的状态。