jQuery实现Checkbox勾选添加/移除Modal项及双向同步功能

核心思路是通过自定义数据属性（data attribute）为每个动态生成的<li>分配唯一标识，实现原始元素与克隆元素的精准关联，同时使用事件委托处理动态元素的交互。

完整代码实现 #

// 监听first-wrapper内checkbox的状态变化（事件委托）
document.querySelector('.first-wrapper').addEventListener('change', (event) => {
  const checkbox = event.target;
  // 仅处理add-to-modal类的checkbox
  if (!checkbox.classList.contains('add-to-modal')) return;

  const originalLi = checkbox.closest('.item');
  const modalContainer = document.querySelector('.modal-container');

  // 为原始li分配唯一标识（若尚未存在）
  if (!originalLi.dataset.itemId) {
    originalLi.dataset.itemId = `item-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
  }
  const itemId = originalLi.dataset.itemId;

  if (checkbox.checked) {
    // 克隆原始li
    const clonedLi = originalLi.cloneNode(true);
    // 同步唯一标识
    clonedLi.dataset.itemId = itemId;

    // 禁用克隆后的checkbox，避免用户误操作
    const clonedCheckbox = clonedLi.querySelector('.add-to-modal');
    clonedCheckbox.disabled = true;

    // 添加移除按钮
    const removeBtn = document.createElement('button');
    removeBtn.textContent = '移除';
    removeBtn.classList.add('remove-btn');
    clonedLi.appendChild(removeBtn);

    // 将克隆元素添加到modal容器
    modalContainer.appendChild(clonedLi);
  } else {
    // 根据唯一标识精准移除modal中对应的克隆元素
    const cloneToRemove = modalContainer.querySelector(`[data-item-id="${itemId}"]`);
    if (cloneToRemove) {
      cloneToRemove.remove();
    }
  }
});

// 监听modal内移除按钮的点击事件（事件委托）
document.querySelector('.modal-container').addEventListener('click', (event) => {
  const removeBtn = event.target;
  // 仅处理remove-btn类的按钮
  if (!removeBtn.classList.contains('remove-btn')) return;

  const clonedLi = removeBtn.closest('.item');
  const itemId = clonedLi.dataset.itemId;

  // 找到原始li并取消对应checkbox的勾选状态
  const originalLi = document.querySelector(`.first-wrapper .item[data-item-id="${itemId}"]`);
  if (originalLi) {
    const originalCheckbox = originalLi.querySelector('.add-to-modal');
    originalCheckbox.checked = false;
  }

  // 移除modal中的当前元素
  clonedLi.remove();
});

关键逻辑说明 #

1. 唯一标识分配：

   • 当checkbox状态变化时，先检查对应的<li>是否有data-item-id属性，若没有则生成一个由时间戳+随机字符串组成的唯一ID，确保动态生成的元素也能被精准匹配。

2. 克隆与添加：

   • 勾选checkbox时，深度克隆原始<li>，同步唯一标识，禁用克隆后的checkbox避免交互冲突，添加移除按钮后插入到modal容器。

3. 精准移除：

   • 取消勾选时，通过data-item-id在modal中找到对应的克隆元素并移除，解决了原代码无法精准移除的问题。

4. 移除按钮交互：

   • 点击modal中的移除按钮时，通过唯一标识找到原始<li>，取消其checkbox的勾选状态，再移除当前克隆元素，实现双向同步。

5. 事件委托：

   • 所有事件监听都绑定在静态父容器上（first-wrapper和modal-container），确保动态生成的元素也能触发事件，无需重复绑定。

内容的提问来源于stack exchange，提问作者Alipvd