纯js实现穿梭框全选全不选,左右穿梭
时间: 2024-01-21 11:02:30 浏览: 28
实现穿梭框全选和全不选,可以在页面中添加两个复选框,一个表示全选,一个表示全不选,然后通过 JS 代码来实现对所有选项进行选中或取消选中的操作。
以下是一个简单的示例代码:
HTML代码:
```
<div>
<label><input type="checkbox" id="checkAll">全选</label>
<label><input type="checkbox" id="uncheckAll">全不选</label>
</div>
<div>
<select id="left" multiple="multiple">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
</select>
<div>
<button id="toRight">>></button>
<button id="toLeft"><<</button>
</div>
<select id="right" multiple="multiple"></select>
</div>
```
JS代码:
```
// 获取元素
var checkAll = document.getElementById('checkAll');
var uncheckAll = document.getElementById('uncheckAll');
var left = document.getElementById('left');
var right = document.getElementById('right');
var toRight = document.getElementById('toRight');
var toLeft = document.getElementById('toLeft');
// 全选/全不选
checkAll.addEventListener('click', function() {
for (var i = 0; i < left.options.length; i++) {
left.options[i].selected = true;
}
});
uncheckAll.addEventListener('click', function() {
for (var i = 0; i < left.options.length; i++) {
left.options[i].selected = false;
}
});
// 左右穿梭
toRight.addEventListener('click', function() {
for (var i = 0; i < left.options.length; i++) {
if (left.options[i].selected) {
right.appendChild(left.options[i]);
i--;
}
}
});
toLeft.addEventListener('click', function() {
for (var i = 0; i < right.options.length; i++) {
if (right.options[i].selected) {
left.appendChild(right.options[i]);
i--;
}
}
});
```
这样就实现了一个简单的穿梭框,可以通过全选/全不选按钮来实现对所有选项的选择,也可以通过左右穿梭按钮来将选中的选项进行穿梭。