以下是一个
实现勾选穿梭、全选、选项
置灰和计数的
JavaScript 代码：
HTML：
```html
<
div>
<p>可选项目：</p>
<ul id="select">
<
li>
<l
abel>
<input type="checkbox" value="1"> 选项1
</l
abel>
</
li>
<
li>
<l
abel>
<input type="checkbox" value="2"> 选项2
</l
abel>
</
li>
<
li>
<l
abel>
<input type="checkbox" value="3"> 选项3
</l
abel>
</
li>
<
li>
<l
abel>
<input type="checkbox" value="4"> 选项4
</l
abel>
</
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.innerHTML = `${selectedCount} / ${totalCount}`;
}
// 给所有的可选项目添加事件监听器
select.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
checkbox.addEvent
Listener('change', () => {
// 如果该项目已经被选中，则将其添加到已选项目列表中
if (checkbox.checked) {
const
li = document.createElement('
li');
const l
abel = document.createElement('l
abel');
const text = document.createTextNode(checkbox.parentNode.innerText.trim());
const input = document.createElement('input');
input.type = 'checkbox';
input.value = checkbox.value;
input.checked = true;
input.addEvent
Listener('change', () => {
// 如果该项目被取消选中，则将其从已选项目列表中移除
if (!input.checked) {
li.remove();
updateCount();
}
});
l
abel.appendChild(input);
l
abel.appendChild(text);
li.appendChild(l
abel);
selected.appendChild(
li);
updateCount();
}
// 如果该项目被取消选中，则将其从已选项目列表中移除
else {
const
li = selected.querySelector(`
li input[value="${checkbox.value}"]`).parentNode.parentNode;
li.remove();
updateCount();
}
});
});
//
点击 "全选" 按钮时，将所有可选项目添加到已选项目列表中
selectAllBtn.addEvent
Listener('c
lick', () => {
select.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
checkbox.checked = true;
checkbox.
dispatchEvent(new Event('change'));
});
});
//
点击 "穿梭" 按钮时，将所有已选项目移动到可选项目列表中
transferBtn.addEvent
Listener('c
lick', () => {
selected.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
const
li = select.querySelector(`
li input[value="${checkbox.value}"]`).parentNode.parentNode;
li.class
List.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, { child
List: true });
```
实现的
效果为：
-
点击可选项目后，将其添加到已选项目列表中；
-
点击已选项目后，将其从已选项目列表中移除；
-
点击 "全选" 按钮后，将所有可选项目添加到已选项目列表中；
-
点击 "穿梭" 按钮后，将所有已选项目移动到可选项目列表中，并将已选项目的复选框取消选中；
- 当已选项目列表为空时，禁用 "穿梭" 按钮；
- 当已选项目列表中的项目被移除时，更新计数器的值。
1536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
