jquery全选全不选反选的实现

jQuery全选功能是我们在开发网页时经常使用的一种功能，它可以让我们轻松地实现全选或取消全选的操作，在本文中，我们将详细介绍如何使用jQuery实现全选功能。

我们需要引入jQuery库，在HTML文件中添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们创建一个简单的HTML结构，包含一个复选框列表和一个全选按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery全选示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="checkbox" class="select-all">全选/取消全选
    <br>
    <input type="checkbox" class="checkbox">选项1
    <br>
    <input type="checkbox" class="checkbox">选项2
    <br>
    <input type="checkbox" class="checkbox">选项3
    <br>
    <script>
        // 在这里编写jQuery全选功能的代码
    </script>
</body>
</html>

现在，我们可以编写jQuery全选功能的代码了，我们需要为全选按钮添加点击事件监听器，当点击全选按钮时，触发checkAll函数，我们需要为所有复选框添加点击事件监听器，当点击某个复选框时，触发toggleCheckbox函数，我们需要编写checkAll和toggleCheckbox函数的实现代码。

$(document).ready(function() {
    $(".select-all").click(function() {
        checkAll();
    });
    $(".checkbox").click(function() {
        toggleCheckbox($(this));
    });
});
function checkAll() {
    if ($(".select-all").is(":checked")) {
        $(".checkbox").prop("checked", true);
    } else {
        $(".checkbox").prop("checked", false);
    }
}
function toggleCheckbox(checkbox) {
    if (checkbox.is(":checked")) {
        $(".checkbox").prop("checked", true);
    } else {
        $(".checkbox").prop("checked", false);
    }
}

jquery全选全不选反选的实现