全选反选答案``` [ ]全选 [ ]商品1 [ ]商品2 [ ]商品3 [ ]全选 ```<!doctype html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>

</head>
<body>
<p><input type="checkbox" class="check_all">全选</p>
<p><input type="checkbox" class="goods">商品1</p>
<p><input type="checkbox" class="goods">商品2</p>
<p><input type="checkbox" class="goods">商品3</p>
<p><input type="checkbox" class="check_all">全选</p>

<script>
    // 选中按钮发生改变的时候
    $(".check_all").change(function () {
        // 获取选中状态
        var selectAll = $(this).prop("checked");

        // 如果全选就让另外三个都选中
        if (selectAll) {
            $(".goods,.check_all").prop("checked", "checked");
        } else {
            $(".goods,.check_all").prop("checked", "");
        }
    })


    // 当所有的商品都被选中的时候，让全选勾上
    $(".goods").change(function () {
        // 获取全部的长度
        var allNum = $(".goods").length;

        // 获取选中的长度
        var selectedNum = $(".goods:checked").length;

        // 如果两个长度是一样的
        if (allNum == selectedNum) {
            // 让全选框选中
            $(".check_all").prop("checked", "checked");
        } else {
            $(".check_all").prop("checked", "");
        }
    })
</script>
</body>
</html>