当前位置：首页 > JavaScript

js全选实现

2026-04-05 23:47:40JavaScript

全选功能的实现方式

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

js全选实现

通过DOM操作实现全选

// 获取全选复选框和子复选框
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() {
        if (!this.checked) {
            selectAll.checked = false;
        } else {
            const allChecked = [...checkboxes].every(cb => cb.checked);
            selectAll.checked = allChecked;
        }
    });
});

使用jQuery实现全选

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

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

使用Vue实现全选

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

使用React实现全选

class SelectAllComponent extends React.Component {
    state = {
        selectAll: false,
        items: [
            { id: 1, checked: false },
            { id: 2, checked: false },
            { id: 3, checked: false }
        ]
    };

    handleSelectAll = (e) => {
        const checked = e.target.checked;
        this.setState({
            selectAll: checked,
            items: this.state.items.map(item => ({
                ...item,
                checked
            }))
        });
    };

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

        this.setState({
            items: newItems,
            selectAll: newItems.every(item => item.checked)
        });
    };

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