js实现反选
实现反选功能的方法
反选功能通常用于复选框（checkbox）操作，即选中当前未选中的项，取消选中已选中的项。以下是几种实现方式：
使用纯JavaScript实现
通过遍历所有复选框并切换其选中状态：
function toggleCheckboxes() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
}针对特定容器内的复选框
如果只需要反选特定容器内的复选框：
function toggleContainerCheckboxes(containerId) {
const container = document.getElementById(containerId);
const checkboxes = container.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
}结合事件监听实现
为反选按钮添加点击事件：
document.getElementById('toggleButton').addEventListener('click', function() {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
});使用数据属性实现更精细控制
通过data-属性标记需要反选的复选框：
function toggleSelectedCheckboxes() {
const checkboxes = document.querySelectorAll('[data-toggle-group="group1"]');
checkboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
}保留某些特殊复选框不被反选
添加条件判断来排除特定复选框：
function toggleExcludingSome() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
if (!checkbox.classList.contains('no-toggle')) {
checkbox.checked = !checkbox.checked;
}
});
}注意事项
- 确保DOM加载完成后再执行查询操作，可以将代码放在
DOMContentLoaded事件中 - 对于大量复选框，考虑性能优化，如使用事件委托
- 反选功能通常需要与全选/取消全选功能配合使用
- 在框架中使用时（如React/Vue），建议使用框架自带的状态管理方式
