JavaScript 中怎么用事件委托实现多选框全选反选-js教程-PHP中文网

事件委托实现多选框全选/反选，核心是监听父容器click事件，通过event.target判断点击目标：若为.select-all则同步所有[name="item"]复选框状态；若为[name="item"]则更新全选框状态。

javascript 中怎么用事件委托实现多选框全选反选

用事件委托实现多选框全选/反选，核心是把点击事件绑定在父容器上，通过 event.target 判断是否点中了“全选”复选框或普通选项，再统一控制所有子复选框的状态。这样既节省监听器数量，又支持动态添加的选项。

HTML 结构要清晰，有明确的父子关系

确保所有待操作的复选框（包括全选框）都在同一个父容器内，且能通过选择器区分：

<div id="checkbox-container">
  <label><input type="checkbox" class="select-all"> 全选</label><br><label><input type="checkbox" name="item" value="1"> 选项 1</label><br><label><input type="checkbox" name="item" value="2"> 选项 2</label><br><label><input type="checkbox" name="item" value="3"> 选项 3</label><br>
</div>

绑定事件委托，监听父容器的 click

只给父容器加一个事件监听器，用 event.target 检查点击目标：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

如果点中的是 .select-all，就同步所有 [name="item"] 复选框的状态为它的 checked 值
如果点中的是任意一个 [name="item"]，就检查是否所有选项都已勾选，更新全选框状态

JavaScript 实现逻辑（含反选兼容）

下面是一段简洁可靠的代码，支持点击全选框、单个选项，也支持点击文字标签触发（因为 <label></label> 会自动聚焦到关联的 input）：

const container = document.getElementById('checkbox-container');

container.addEventListener('click', function (e) {
  const target = e.target;

  // 点击的是全选框
  if (target.classList.contains('select-all')) {
    const items = this.querySelectorAll('[name="item"]');
    items.forEach(cb => cb.checked = target.checked);
  }

  // 点击的是某个选项（包括通过 label 触发）
  else if (target.name === 'item') {
    const items = this.querySelectorAll('[name="item"]');
    const allChecked = [...items].every(cb => cb.checked);
    this.querySelector('.select-all').checked = allChecked;
  }
});