JavaScript实现勾选穿梭，全选，选项置灰，计数含css样式

以下是一个实现勾选穿梭、全选、选项置灰和计数的 JavaScript 代码：

HTML：

<div>
  <p>可选项目：</p>
  <ul id="select">
    <li>
      <label>
        <input type="checkbox" value="1"> 选项1
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="2"> 选项2
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="3"> 选项3
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="4"> 选项4
      </label>
    </li>
  </ul>
</div>

<div>
  <button id="selectAll">全选</button>
  <button id="transfer">穿梭</button>
</div>

<div>
  <p>已选项目：</p>
  <ul id="selected">
  </ul>
</div>

CSS：

li.disabled {
  color: #ccc;
  pointer-events: none;
}

JavaScript：

const select = document.getElementById('select');
const selected = document.getElementById('selected');
const selectAllBtn = document.getElementById('selectAll');
const transferBtn = document.getElementById('transfer');

function updateCount() {
  const selectedCount = selected.querySelectorAll('input[type="checkbox"]').length;
  const totalCount = select.querySelectorAll('input[type="checkbox"]').length;
  const countEl = document.getElementById('count');
  countEl.innerHTML = `${selectedCount} / ${totalCount}`;
}

// 给所有的可选项目添加事件监听器
select.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
  checkbox.addEventListener('change', () => {
    // 如果该项目已经被选中，则将其添加到已选项目列表中
    if (checkbox.checked) {
      const li = document.createElement('li');
      const label = document.createElement('label');
      const text = document.createTextNode(checkbox.parentNode.innerText.trim());
      const input = document.createElement('input');
      input.type = 'checkbox';
      input.value = checkbox.value;
      input.checked = true;
      input.addEventListener('change', () => {
        // 如果该项目被取消选中，则将其从已选项目列表中移除
        if (!input.checked) {
          li.remove();
          updateCount();
        }
      });
      label.appendChild(input);
      label.appendChild(text);
      li.appendChild(label);
      selected.appendChild(li);
      updateCount();
    }
    // 如果该项目被取消选中，则将其从已选项目列表中移除
    else {
      const li = selected.querySelector(`li input[value="${checkbox.value}"]`).parentNode.parentNode;
      li.remove();
      updateCount();
    }
  });
});

// 点击 "全选" 按钮时，将所有可选项目添加到已选项目列表中
selectAllBtn.addEventListener('click', () => {
  select.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
    checkbox.checked = true;
    checkbox.dispatchEvent(new Event('change'));
  });
});

// 点击 "穿梭" 按钮时，将所有已选项目移动到可选项目列表中
transferBtn.addEventListener('click', () => {
  selected.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
    const li = select.querySelector(`li input[value="${checkbox.value}"]`).parentNode.parentNode;
    li.classList.remove('disabled');
    li.querySelector('input[type="checkbox"]').checked = false;
    li.querySelector('input[type="checkbox"]').dispatchEvent(new Event('change'));
    checkbox.parentNode.parentNode.remove();
  });
  updateCount();
});

// 当已选项目列表为空时，禁用 "穿梭" 按钮
const observer = new MutationObserver(() => {
  if (selected.children.length === 0) {
    transferBtn.disabled = true;
  } else {
    transferBtn.disabled = false;
  }
});
observer.observe(selected, { childList: true });

实现的效果为：

- 点击可选项目后，将其添加到已选项目列表中；
- 点击已选项目后，将其从已选项目列表中移除；
- 点击 "全选" 按钮后，将所有可选项目添加到已选项目列表中；
- 点击 "穿梭" 按钮后，将所有已选项目移动到可选项目列表中，并将已选项目的复选框取消选中；
- 当已选项目列表为空时，禁用 "穿梭" 按钮；
- 当已选项目列表中的项目被移除时，更新计数器的值。