事件委托实现穿梭框全选逻辑，关键是将事件监听绑定在父容器.transfer上，通过closest定位面板并区分全选/单选操作，动态同步checked与indeterminate状态，支持选项动态增删且左右隔离。
事件委托处理穿梭框全选逻辑，关键是把“全选/取消全选”事件监听绑定在父容器上，而不是每个复选框单独绑定。这样既能动态响应新增选项，又能减少事件处理器数量。
为什么用事件委托？
穿梭框（Transfer）通常包含左右两个列表，选项可能动态增删（比如搜索过滤、分页加载）。如果直接给每个 checkbox 绑定 click 事件，新插入的选项不会自动拥有全选逻辑；而用事件委托，只需监听一次父容器，所有子 checkbox 的点击都能被捕获和响应。
核心 HTML 结构示例
确保左右两个列表有明确的容器和统一的 checkbox 类名：
<div class="transfer">
<div class="transfer-panel" data-side="left">
<div class="panel-header">
<label><input type="checkbox" class="select-all" data-side="left"> 全选</label>
</div>
<div class="panel-body">
<label><input type="checkbox" name="item" value="1"> 选项1</label>
<label><input type="checkbox" name="item" value="2"> 选项2</label>
<!-- 动态插入的新项也会匹配 -->
</div>
</div>
<p><div class="transfer-panel" data-side="right">
<div class="panel-header">
<label><input type="checkbox" class="select-all" data-side="right"> 全选</label>
</div>
<div class="panel-body">
<label><input type="checkbox" name="item" value="3"> 选项3</label>
</div>
</div>
</div>用事件委托实现全选联动
监听 .transfer 容器，区分点击的是“全选框”还是普通选项，并按需同步状态：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 点击
.select-all：设置对应侧所有name="item"的 checkbox 为相同 checked 状态 - 点击普通
input[name="item"]：检查该侧所有 item 是否全选，动态更新对应.select-all的 checked 和 indeterminate 状态 - 用
event.target.closest()安全获取触发元素，避免误判包装标签 - 注意
indeterminate状态：当部分选中时，全选框应显示“—”，这需手动设置，浏览器不自动处理
精简可复用的 JS 代码
以下是一段轻量、无框架依赖的实现：
document.querySelector('.transfer').addEventListener('click', function (e) {
const target = e.target;
const panel = target.closest('.transfer-panel');
if (!panel) return;
<p>const side = panel.dataset.side;
const allItems = panel.querySelectorAll('input[name="item"]');
const selectAll = panel.querySelector('.select-all');</p><p>// 处理全选框点击
if (target === selectAll) {
allItems.forEach(cb => cb.checked = selectAll.checked);
return;
}</p><p>// 处理单个选项点击
if (target.name === 'item') {
const checkedCount = [...allItems].filter(cb => cb.checked).length;
selectAll.checked = checkedCount === allItems.length;
selectAll.indeterminate = checkedCount > 0 && checkedCount < allItems.length;
}
});这段逻辑支持动态添加选项（只要插入到 .panel-body 内）、保持 indeterminate 视觉状态，并且左右两侧完全隔离互不影响。不复杂但容易忽略细节，比如 indeterminate 需手动控制、事件代理要限制在正确面板内、避免重复绑定等。
