以下是一个实现勾选穿梭、全选、选项置灰和计数的 JavaScript 代码：
HTML：
```
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：
```
css
li.disabled {
color: #ccc;
pointer-events: none;
}
```
JavaScript：
```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.inner
HTML = `${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 });
```
实现的效果为：
- 点击可选项目后，将其添加到已选项目列表中；
- 点击已选项目后，将其从已选项目列表中移除；
- 点击 "全选" 按钮后，将所有可选项目添加到已选项目列表中；
- 点击 "穿梭" 按钮后，将所有已选项目移动到可选项目列表中，并将已选项目的复选框取消选中；
- 当已选项目列表为空时，禁用 "穿梭" 按钮；
- 当已选项目列表中的项目被移除时，更新计数器的值。
981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
