# 属性操作

最新推荐文章于 2022-04-30 17:54:06 发布

大名张无忌

最新推荐文章于 2022-04-30 17:54:06 发布

阅读量104

点赞数

分类专栏： JS # jQuery 文章标签： checkbox js jquery

本文链接：https://blog.csdn.net/qq_40029828/article/details/105280790

版权

JS 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

1、购物车全选、计算小结/总计、删除、修改背景色功能

<style>
    * {
        margin: 0 auto;
        padding: 0 auto;
        padding-inline-start: 0px;
    }

    div {
        position: relative;
        line-height: 30px;
        margin-left: 30px;
    }

    .num {
        width: 20px;
        text-align: center;
    }

    button {
        margin: 0;
        width: 15px;
        text-align: center;
        padding: 0;
    }

    div .priceOne {
        position: absolute;
        left: 100px;
        top: 0;
    }

    div .priceAll {
        position: absolute;
        left: 180px;
        top: 0;
    }

    div .del {
        position: absolute;
        left: 250px;
        top: 0;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    div .numAll {
        position: absolute;
        width: 30px;
        height: 30px;
        left: 70px;
        top: 0;
    }

    div .moneyAll {
        position: absolute;
        left: 135px;
        top: 0;
    }

    .checkColor {
        background-color: pink;
    }

</style>

<body>
<div>
    <div><input type="checkbox" class="checkall">全选
        <span>&nbsp;&nbsp;&nbsp;&nbsp;数量</span> <span> &nbsp;&nbsp;&nbsp;   &nbsp;  单价</span> <span> &nbsp;&nbsp;&nbsp; &nbsp;   小计</span>
    </div>
    <div class="item"><input type="checkbox" class="checkself">选项1
        <button class="down">-</button>
        <input type="text" class="num" value="1">
        <button
                class="up">+
        </button>
        <div class="priceOne">￥22.60</div>
        <div class="priceAll">￥22.60</div>
        <div class="del"><a href="#">删除</a></div>
    </div>
    <div class="item"><input type="checkbox" class="checkself">选项2
        <button class="down">-</button>
        <input type="text" class="num" value="1">
        <button
                class="up">+
        </button>
        <div class="priceOne">￥12.60</div>
        <div class="priceAll">￥12.60</div>
        <div class="del"><a href="#">删除</a></div>
    </div>
    <div class="item"><input type="checkbox" class="checkself">选项3
        <button class="down">-</button>
        <input type="text" class="num" value="1">
        <button
                class="up">+
        </button>
        <div class="priceOne">￥34.00</div>
        <div class="priceAll">￥34.00</div>
        <div class="del"><a href="#">删除</a></div>
    </div>
    <div><input type="checkbox" class="checkall">全选2
        <span>&nbsp;&nbsp;总数&nbsp;&nbsp;</span>
        <div class="numAll">3</div>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;总计&nbsp;&nbsp;</span>
        <div class="moneyAll">￥69.20</div>
        <div class="delSelect"><a href="#">删除选中商品</a></div>
        <div class="delAll"><a href="#">全部删除</a></div>
    </div>

</div>


</body>
<script src="jqueryMin.js"></script>
<script>
    //4、计算总数量和总金额
    var getSum = function () {
        var numAll = 0;
        var moneyAll = 0.00;
        $(".num").each(function (i, ele) {
            numAll += parseInt($(ele).val());
        });
        $(".numAll").text(numAll);
        $.each($(".priceAll"), function (i, ele) {
            moneyAll += parseFloat($(ele).text().substr(1));
        });
        $(".moneyAll").text("￥" + moneyAll.toFixed(2));
    };
    getSum();
    //1、全选操作
    $(".checkall").change(function () {
        //并集选择器
        $(".checkall, .checkself").prop("checked", $(this).prop("checked"));
        // 9、全部选中修改背景颜色
        if ($(".checkall").prop("checked")) {
            $(".item").addClass("checkColor");
        } else {
            $(".item").removeClass("checkColor");
        }

    });
    $(".checkself").change(function () {
        //被选中的复选框的个数与复选框总数比较
        if ($(".checkself:checked").length === $(".checkself").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        //9、单个选中修改背景颜色
        if ($(this).prop("checked")) {
            $(this).parent(".item").addClass("checkColor");
        } else {
            $(this).parent(".item").removeClass("checkColor");
        }

    });
    //2、加减数量操作
    var num;
    $(".up").click(function () {
        num = parseInt($(this).siblings(".num").val());
        num++;
        $(this).siblings(".num").val(num);
        //小结计算
        var priceOne = parseFloat($(this).siblings(".priceOne").text().substr(1));
        var priceAll = (priceOne * num).toFixed(2);
        $(this).siblings(".priceAll").text("￥" + priceAll);
        getSum();
    });
    $(".down").click(function () {
        num = parseInt($(this).siblings(".num").val());
        if (num <= 1) {
            alert("不能再少了");
        } else {
            num--;
            $(this).siblings(".num").val(num);
            //小结计算
            var priceOne = parseFloat($(this).siblings(".priceOne").text().substr(1));
            var priceAll = (priceOne * num).toFixed(2);
            $(this).siblings(".priceAll").text("￥" + priceAll);
        }
        getSum();
    })
    //3、文本框的值发生变化也要计算小计
    $(".num").change(function () {
        num = parseInt($(this).val());
        var priceOne = parseFloat($(this).siblings(".priceOne").text().substr(1));
        var priceAll = (priceOne * num).toFixed(2);
        $(this).siblings(".priceAll").text("￥" + priceAll);
        getSum();
    });
    //5、删除单件商品
    $(".del").click(function () {
        $(this).parent(".item").remove();
        getSum();
    });
    //6、删除选中商品
    $(".delSelect").click(function () {
        $(".checkself:checked").parent(".item").html("");
        getSum();
    });
    //7、删除所有商品
    $(".delAll").click(function () {
        $(".item").remove();
        getSum();

    });
</script>