当前位置：首页 > jquery

jquery实现全选

2026-02-03 23:40:37jquery

jQuery实现全选功能

使用jQuery实现全选功能可以通过监听全选复选框的点击事件，并根据其状态设置其他复选框的选中状态。

HTML结构示例

<input type="checkbox" id="selectAll">全选
<input type="checkbox" class="item">选项1
<input type="checkbox" class="item">选项2
<input type="checkbox" class="item">选项3

jQuery代码实现

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

实现反选功能

如果需要实现反选功能，可以扩展上述代码。

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

$('.item').click(function() {
    var allChecked = $('.item:checked').length === $('.item').length;
    $('#selectAll').prop('checked', allChecked);
});

动态生成的复选框处理

如果复选框是动态生成的，需要使用事件委托来绑定事件。

$(document).on('click', '#selectAll', function() {
    $('.item').prop('checked', this.checked);
});

$(document).on('click', '.item', function() {
    var allChecked = $('.item:checked').length === $('.item').length;
    $('#selectAll').prop('checked', allChecked);
});

表格中的全选功能

在表格中实现全选功能时，可以结合表格的行选择。

HTML结构示例

<table>
    <thead>
        <tr>
            <th><input type="checkbox" id="selectAll"></th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>Item 1</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>Item 2</td>
        </tr>
    </tbody>
</table>

jQuery代码实现

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

$('.item').click(function() {
    var allChecked = $('.item:checked').length === $('.item').length;
    $('#selectAll').prop('checked', allChecked);
});