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 @   前端导师歌谣  阅读(13)  评论(0)  编辑  收藏  举报
相关博文：
· jquery全选按钮下-30
· jquery-全选按钮下-30
· 通过点击事件选中多选框
· v-model应用
· js小案例-全选按钮的实现
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae