当前位置：首页 > JavaScript

js 实现全选

2026-02-28 22:12:53JavaScript

实现全选功能的方法

在JavaScript中实现全选功能通常涉及操作复选框（checkbox）的checked属性。以下是几种常见的实现方式：

通过DOM操作实现

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

// 为全选复选框添加事件监听
selectAllCheckbox.addEventListener('change', function() {
    itemCheckboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// 为子复选框添加事件监听，取消全选状态
itemCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        if (!this.checked) {
            selectAllCheckbox.checked = false;
        } else {
            // 检查是否所有子复选框都被选中
            const allChecked = [...itemCheckboxes].every(cb => cb.checked);
            selectAllCheckbox.checked = allChecked;
        }
    });
});

使用jQuery实现

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

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

使用Vue.js实现

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

使用React实现

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

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

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

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