js实现反选
实现反选功能
在JavaScript中实现反选功能通常涉及对一组元素（如复选框）的状态进行反转操作。以下是几种常见的实现方式：
基于DOM操作的反选
// 获取所有复选框元素
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 反选逻辑
function toggleSelectAll() {
checkboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
}配合全选按钮的实现
<input type="checkbox" id="selectAll" onclick="toggleAll()">
<label for="selectAll">全选/反选</label>
<script>
function toggleAll() {
const masterCheckbox = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('input[type="checkbox"]:not(#selectAll)');
checkboxes.forEach(checkbox => {
checkbox.checked = masterCheckbox.checked;
});
}
</script>使用事件委托的反选
对于动态生成的元素，可以使用事件委托：
document.addEventListener('click', function(e) {
if (e.target.id === 'invertSelection') {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
}
});配合数据绑定的实现（Vue示例）
new Vue({
el: '#app',
data: {
items: [
{ id: 1, selected: false },
{ id: 2, selected: true }
]
},
methods: {
invertSelection() {
this.items.forEach(item => {
item.selected = !item.selected;
});
}
}
});配合React的实现
function CheckboxList() {
const [items, setItems] = useState([
{ id: 1, checked: false },
{ id: 2, checked: true }
]);
const invertSelection = () => {
setItems(items.map(item => ({
...item,
checked: !item.checked
})));
};
return (
<div>
<button onClick={invertSelection}>反选</button>
{items.map(item => (
<input
key={item.id}
type="checkbox"
checked={item.checked}
onChange={() => {}}
/>
))}
</div>
);
}性能优化建议
对于大量元素的场景，可以考虑以下优化：
- 使用文档片段(documentFragment)批量操作DOM
- 对可见区域外的元素使用虚拟滚动技术
- 避免在循环中直接操作DOM，先处理数据再批量更新
这些方法涵盖了从原生JavaScript到现代前端框架的反选实现，可以根据具体项目需求选择适合的方案。
