js全选与取消全选按钮

你可以通过以下代码实现：

HTML代码：

<input type="checkbox" id="select-all">全选
<br>
<input type="checkbox" class="select-item">选项1
<br>
<input type="checkbox" class="select-item">选项2
<br>
<input type="checkbox" class="select-item">选项3

JavaScript代码：

// 获取全选和所有项的元素
var selectAll = document.getElementById('select-all');
var selectItems = document.getElementsByClassName('select-item');

// 点击全选按钮
selectAll.onclick = function() {
  // 遍历所有项，设置它们的选中状态与全选按钮一致
  for (var i = 0; i < selectItems.length; i++) {
    selectItems[i].checked = this.checked;
  }
};

// 点击任意一个项
for (var i = 0; i < selectItems.length; i++) {
  selectItems[i].onclick = function() {
    // 如果所有项都被选中，全选按钮也要选中，否则不选中
    var allChecked = true;
    for (var j = 0; j < selectItems.length; j++) {
      if (!selectItems[j].checked) {
        allChecked = false;
        break;
      }
    }
    selectAll.checked = allChecked;
  };
}

这段代码会给页面上的全选按钮和所有项添加事件监听器，通过 JavaScript 来实现全选和取消全选的功能。