jquery-全选按钮下-30

最新推荐文章于 2024-09-10 06:15:30 发布

前端歌谣

最新推荐文章于 2024-09-10 06:15:30 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/qq_41632427/article/details/125254529

版权

歌谣-前端-jquery学习专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
</head>
 
<body>
    <div class="cart-thead">
        <div class="t-checkbox">我是上面的
            <input type="checkbox" name="" id="" class="checkall">
        </div>
    </div>
    <div class="cart-item-list">
        <div class="p-checkbox">香蕉
            <input type="checkbox" name="" id="" class="j-checkbox">
        </div>
        <div class="p-checkbox">苹果
            <input type="checkbox" name="" id="" class="j-checkbox">
        </div>
        <div class="p-checkbox">葡萄
            <input type="checkbox" name="" id="" class="j-checkbox">
        </div>
    </div>
    <div class="cart-floatbar">
        <div class="selectall">我是全选的
            <input type="checkbox" name="" id="" class="checkall">
        </div>
    </div>
    <script>
        //全选
        $(function() {
            //全选按钮状态给三个小的
            //事件用change
            $(".checkall").change(function() {
                //跟随全选按钮状态变化
                console.log($(this).prop("checked"));
                $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
            });
            //通过小的复选框来选中全选按钮
            $(".j-checkbox").change(function() {
                //超过三个就全选
                if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
                    $(".checkall").prop("checked", true);
                } else {
                    $(".checkall").prop("checked", false);
                }
            })
        })
    </script>
</body>
 
</html>

运行结果