jquery-全选按钮上29 

<!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"));
            })
        })
    </script>
</body>
 
</html>

运行结果

 

posted @ 2022-06-16 20:09  前端导师歌谣  阅读(15)  评论(0)    收藏  举报