js实现全选和全不选

实现全选和全不选功能

在JavaScript中实现全选和全不选功能通常需要操作复选框的状态。以下是几种常见的实现方式：

使用原生JavaScript

// 获取全选复选框和所有子复选框
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.item-checkbox');

// 全选复选框事件监听
selectAll.addEventListener('change', function() {
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// 子复选框事件监听
checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        selectAll.checked = [...checkboxes].every(c => c.checked);
    });
});

使用jQuery实现

$('#selectAll').change(function() {
    $('.item-checkbox').prop('checked', $(this).prop('checked'));
});

$('.item-checkbox').change(function() {
    $('#selectAll').prop('checked', $('.item-checkbox:checked').length === $('.item-checkbox').length);
});

使用Vue.js实现

new Vue({
    el: '#app',
    data: {
        selectAll: false,
        items: [
            { id: 1, checked: false },
            { id: 2, checked: false }
        ]
    },
    watch: {
        selectAll(newVal) {
            this.items.forEach(item => {
                item.checked = newVal;
            });
        }
    },
    computed: {
        allItemsSelected() {
            return this.items.every(item => item.checked);
        }
    }
});

使用React实现

function CheckboxList() {
    const [selectAll, setSelectAll] = useState(false);
    const [items, setItems] = useState([
        { id: 1, checked: false },
        { id: 2, checked: false }
    ]);

    const handleSelectAll = (e) => {
        const checked = e.target.checked;
        setSelectAll(checked);
        setItems(items.map(item => ({ ...item, checked })));
    };

    const handleItemChange = (id, e) => {
        const checked = e.target.checked;
        const newItems = items.map(item =>
            item.id === id ? { ...item, checked } : item
        );
        setItems(newItems);
        setSelectAll(newItems.every(item => item.checked));
    };

    return (
        <div>
            <input type="checkbox" checked={selectAll} onChange={handleSelectAll} />
            {items.map(item => (
                <div key={item.id}>
                    <input
                        type="checkbox"
                        checked={item.checked}
                        onChange={(e) => handleItemChange(item.id, e)}
                    />
                </div>
            ))}
        </div>
    );
}

注意事项

1. 确保为每个复选框元素设置了正确的ID或类名
2. 考虑性能优化，特别是在处理大量复选框时
3. 对于动态加载的内容，需要使用事件委托或重新绑定事件
4. 移动端设备上可能需要额外的样式调整以确保良好的用户体验

这些实现方式可以根据具体项目需求进行调整和扩展，核心逻辑是通过控制主复选框的状态来同步所有子复选框的状态。