jQuery实现checkbox全选、反选及删除等操作的方法详解

jQuery实现checkbox全选、反选及删除的方法详解

在Web开发中，经常会使用到checkbox多选框，常用的操作包括全选、反选、删除等。通过jQuery框架，实现这些操作非常简单。下面将详细讲解如何使用jQuery实现checkbox的全选、反选以及删除操作。

实现checkbox全选

Checkbox的全选操作可以通过以下步骤实现：

1. 给“全选”的checkbox设置一个id。
2. 给每个checkbox都设置一个class，以便在操作时能够找到它们。
3. 使用jQuery的prop()方法将“全选”checkbox的选中状态同步到所有checkbox中。

具体实现可以参考以下代码示例：

<table>
    <thead>
        <tr>
            <th><input type="checkbox" id="allCheck"></th>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="singleCheck"></td>
            <td>Tom</td>
            <td>18</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="singleCheck"></td>
            <td>Lucy</td>
            <td>20</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="singleCheck"></td>
            <td>Jack</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

$(function(){
    // 全选
    $("#allCheck").click(function(){
        $(".singleCheck").prop("checked", this.checked);
    });
});

上述代码中，当点击“全选”checkbox时，prop()方法将“全选”checkbox的选中状态同步到所有class为“singleCheck”的checkbox中。

实现checkbox反选

Checkbox的反选操作与全选操作类似，只需要在全选的基础上将每个checkbox的选中状态取反即可。具体实现可以参考以下代码示例：

$(function(){
    // 反选
    $("#reverseCheck").click(function(){
        $(".singleCheck").each(function(){
            $(this).prop("checked", !$(this).prop("checked"));
        });
    });
});

上述代码中，通过each()方法遍历所有class为“singleCheck”的checkbox，然后将它们的选中状态取反。

实现checkbox删除操作

Checkbox的删除操作可以通过以下步骤实现：

1. 给删除按钮设置一个id。
2. 给每个checkbox都设置一个class，以便在操作时能够找到它们。
3. 当点击删除按钮时，使用each()方法遍历所有class为“singleCheck”的checkbox，将已选中的checkbox删除。

具体实现可以参考以下代码示例：

<table>
    <thead>
        <tr>
            <th><input type="checkbox" id="allCheck"></th>
            <th>Name</th>
            <th>Age</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="singleCheck"></td>
            <td>Tom</td>
            <td>18</td>
            <td><button class="deleteBtn">Delete</button></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="singleCheck"></td>
            <td>Lucy</td>
            <td>20</td>
            <td><button class="deleteBtn">Delete</button></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="singleCheck"></td>
            <td>Jack</td>
            <td>22</td>
            <td><button class="deleteBtn">Delete</button></td>
        </tr>
    </tbody>
</table>

$(function(){
    // 删除
    $("#deleteBtn").click(function(){
        $(".singleCheck:checked").each(function(){
            $(this).parent().parent().remove();
        });
    });
});

上述代码中，当点击删除按钮时，使用each()方法遍历所有class为“singleCheck”的checkbox，找到已选中的checkbox并删除它们对应的行。

通过以上示例，可以看出使用jQuery实现checkbox的全选、反选以及删除操作非常简单，只需要掌握基本的jQuery语法和方法即可。